/* Block Blast Online v6.0 — front-page runtime bundle. */
:root {
  --bg: #edf6ff;
  --surface: #ffffff;
  --surface-soft: #eef7ff;
  --text: #122b59;
  --muted: #60759a;
  --line: #d6e6f8;
  --brand: #168fe7;
  --brand-dark: #0d6fc4;
  --accent: #ffb51c;
  --success: #14c83d;
  --purple: #7d43e7;
  --navy: #10265a;
  --danger: #e54842;
  --radius: 20px;
  --shadow: 0 18px 46px rgba(31, 82, 153, .12);
  --shell: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.has-dialog { overflow: hidden; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
button,  input,  textarea,  select { font: inherit; }
button { color: inherit; }
.shell { width: min(calc(100% - 32px), var(--shell)); margin-inline: auto; }
.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; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 9999; transform: translateY(-160%); background: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); }
.skip-link:focus { transform: none; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(216,224,234,.9); backdrop-filter: blur(16px); }
.site-header__inner { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand__link,  .footer-brand { text-decoration: none; font-weight: 850; letter-spacing: -.03em; }
.brand__link { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; }
.brand__mark { display: grid; grid-template-columns: repeat(2, 9px); grid-template-rows: repeat(2, 9px); gap: 3px; padding: 7px; border-radius: 9px; background: var(--text); }
.brand__mark i { display: block; background: #fff; border-radius: 2px; }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { max-height: 42px; width: auto; }
.site-nav__list,  .footer-nav { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.site-nav a,  .footer-nav a { text-decoration: none; font-weight: 700; color: #344054; }
.site-nav a:hover,  .site-nav a:focus,  .footer-nav a:hover,  .footer-nav a:focus { color: var(--brand); }
.nav-toggle { display: none; border: 0; background: transparent; align-items: center; gap: 9px; font-weight: 750; padding: 8px; }
.nav-toggle__bars { width: 20px; display: grid; gap: 4px; }
.nav-toggle__bars i { height: 2px; background: currentColor; border-radius: 9px; }
.game-section { padding: 38px 0 18px; background: linear-gradient(180deg,#fff 0,#f5f8fc 100%); }
.game-shell { max-width: 760px; }
.game-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 6px; font-size: 13px; line-height: 1.3; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
h1, h2, h3 { margin-top: 0; letter-spacing: -.035em; line-height: 1.12; }
h1 { margin-bottom: 8px; font-size: clamp(34px, 6vw, 52px); }
h2 { font-size: clamp(27px, 4vw, 38px); margin-bottom: 14px; }
h3 { font-size: 21px; margin-bottom: 8px; }
.game-intro { max-width: 650px; margin: 0; color: var(--muted); font-size: 17px; }
.icon-action.is-muted { opacity: .45; }
.game-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 18px; touch-action: pan-y; }
.score-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.score-box { background: var(--surface-soft); border-radius: 14px; min-height: 62px; padding: 9px 12px; text-align: center; display: grid; align-content: center; }
.score-box span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.score-box strong { display: block; line-height: 1.05; font-size: 24px; font-variant-numeric: tabular-nums; }
.score-box--combo strong { color: var(--brand); }
.board-wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 6px; border-radius: 18px; background: #cbd5e1; }
.game-board { aspect-ratio: 1; display: grid; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(8,1fr); gap: 5px; user-select: none; touch-action: none; }
.board-cell { min-width: 0; border-radius: 6px; background: #e8edf3; transition: transform .1s ease, background-color .1s ease, opacity .1s ease; }
.board-cell.is-filled { background: var(--brand); box-shadow: inset 0 -2px 0 rgba(0,0,0,.09); }
.board-cell.is-preview { background: #91a6ff; transform: scale(.94); }
.board-cell.is-invalid { background: #fca5a5; opacity: .75; }
.piece-area { min-height: 150px; padding-top: 12px; }
.piece-area__hint { margin: 0 0 2px; text-align: center; color: var(--muted); font-size: 13px; }
.piece-tray { min-height: 122px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 6px; }
.game-piece { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 100px; padding: 12px 6px; background: transparent; border: 0; border-radius: 14px; cursor: grab; touch-action: none; }
.game-piece:hover { background: #f7f9fc; }
.game-piece:active { cursor: grabbing; }
.game-piece.is-dragging { opacity: .22; }
.game-piece__grid { display: grid; width: min(86px, 84%); aspect-ratio: calc(var(--piece-cols) / var(--piece-rows)); gap: 4px; }
.game-piece__grid i { display: block; border-radius: 5px; }
.game-piece__grid i.is-filled { background: var(--brand); box-shadow: inset 0 -2px 0 rgba(0,0,0,.1); }
.game-piece--ghost { position: fixed; top: 0; left: 0; z-index: 9999; min-height: 0; padding: 0; pointer-events: none; transform: translate3d(-9999px,-9999px,0); filter: drop-shadow(0 12px 16px rgba(28,45,75,.2)); }
.game-piece--ghost .game-piece__grid { width: 100%; }
.is-game-dragging,  .is-game-dragging body { overscroll-behavior: none; }
.game-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 15px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 12px; padding: 9px 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-weight: 800; }
.button--primary { background: var(--brand); color: #fff; }
.button--primary:hover { background: var(--brand-dark); }
.button--secondary { background: #fff; border-color: var(--line); }
.button--secondary:hover { border-color: #b7c2cf; }
.button--text { padding-inline: 6px; color: var(--brand); }
.game-status { min-height: 24px; padding-top: 8px; text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; }
.home-section { padding: 64px 0; }
.home-section--tight { padding: 22px 0 10px; }
.home-section--alt { background: #fff; border-block: 1px solid #e7ecf2; }
.feature-strip { display: grid; grid-template-columns: repeat(3,1fr); background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.feature-strip > div { padding: 18px 22px; display: flex; align-items: baseline; gap: 9px; border-right: 1px solid var(--line); }
.feature-strip > div:last-child { border-right: 0; }
.feature-strip strong { font-size: 22px; }
.feature-strip span { color: var(--muted); }
.section-copy p:not(.eyebrow) { color: var(--muted); font-size: 17px; }
.steps-card { list-style: none; margin: 0; padding: 10px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.steps-card li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps-card li:last-child { border-bottom: 0; }
.steps-card li > span { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #e9edff; color: var(--brand); font-weight: 900; }
.steps-card p { margin: 4px 0 0; color: var(--muted); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 24px; }
.tip-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.tip-card { background: #f8fafc; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.tip-card__number { display: inline-block; margin-bottom: 24px; color: var(--brand); font-weight: 900; font-size: 13px; }
.tip-card p { color: var(--muted); margin-bottom: 0; }
.solver-banner { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: #18202c; color: #fff; border-radius: 24px; padding: 32px; }
.solver-banner .eyebrow { color: #91a6ff; }
.solver-banner h2 { max-width: 720px; }
.solver-banner p:not(.eyebrow) { color: #c8d0da; max-width: 700px; }
.solver-banner .button { flex: 0 0 auto; }
.faq-wrap { max-width: 860px; }
.faq-wrap details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; margin-bottom: 10px; }
.faq-wrap summary { cursor: pointer; list-style: none; font-weight: 800; padding: 18px 30px 18px 0; position: relative; }
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after { content: "+"; position: absolute; right: 0; font-size: 22px; line-height: 1; color: var(--brand); }
.faq-wrap details[open] summary::after { content: "–"; }
.faq-wrap details p { margin: -2px 0 18px; color: var(--muted); }
.game-dialog[hidden] { display: none; }
.game-dialog { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; }
.game-dialog__backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.58); backdrop-filter: blur(4px); }
.game-dialog__panel { position: relative; width: min(100%, 420px); background: #fff; border-radius: 22px; padding: 28px; text-align: center; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.game-dialog__panel h2 { font-size: 34px; margin-bottom: 10px; }
.game-dialog__score { display: block; font-size: 52px; letter-spacing: -.05em; margin: 8px 0; }
.game-dialog__panel > p:not(.eyebrow) { color: var(--muted); }
.game-dialog__actions { display: grid; grid-template-columns: 1.2fr .8fr; gap: 10px; margin-top: 20px; }
.post-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.post-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.post-card__media { display: block; aspect-ratio: 16/9; background: #e9edf3; overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 20px; }
.post-card__body h2 { font-size: 22px; }
.post-card__body h2 a { text-decoration: none; }
.post-card__body p { color: var(--muted); }
.post-card__meta { font-size: 13px; font-weight: 800; }
.text-link { color: var(--brand); text-decoration: none; font-weight: 800; }
.article { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px,5vw,48px); }
.solver-placeholder p:not(.eyebrow) { color: var(--muted); max-width: 650px; margin-inline: auto; }
.site-footer { background: #121821; color: #fff; padding: 48px 0 24px; }
.site-footer p { color: #9faab8; max-width: 420px; }
.footer-nav { align-items: flex-start; flex-direction: column; gap: 8px; }
.footer-nav a { color: #d8dee7; }
.site-footer__bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid #2b3440; color: #84909e; display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }
@media (max-width: 760px) {.shell { width: min(calc(100% - 24px), var(--shell)); }
.site-header__inner { min-height: 60px; }
.brand__link { font-size: 18px; }
.nav-toggle { display: inline-flex; }
.site-nav { position: absolute; left: 12px; right: 12px; top: calc(100% + 1px); display: none; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.site-nav.is-open { display: block; }
.site-nav__list { display: block; }
.site-nav__list li + li { border-top: 1px solid var(--line); }
.site-nav__list a { display: block; padding: 12px; }
.game-section { padding-top: 22px; }
.game-heading { align-items: flex-start; }
.game-heading h1 { font-size: 36px; }
.game-intro { font-size: 15px; }
.game-card { margin-inline: -2px; padding: 12px; border-radius: 18px; box-shadow: 0 12px 32px rgba(23,36,58,.09); }
.score-row { margin-bottom: 10px; gap: 7px; }
.score-box { min-height: 54px; padding: 7px; border-radius: 11px; }
.score-box strong { font-size: 20px; }
.board-wrap { padding: 5px; border-radius: 14px; }
.game-board { gap: 4px; }
.board-cell { border-radius: 5px; }
.piece-area { min-height: 126px; padding-top: 8px; }
.piece-tray { min-height: 104px; }
.game-piece { min-height: 88px; padding: 10px 3px; }
.game-piece__grid { width: min(72px, 86%); gap: 3px; }
.game-toolbar { display: grid; grid-template-columns: 1fr 1.1fr; gap: 6px; }
.game-toolbar .button { width: 100%; padding-inline: 8px; font-size: 14px; }
.feature-strip { grid-template-columns: 1fr; }
.feature-strip > div { border-right: 0; border-bottom: 1px solid var(--line); }
.feature-strip > div:last-child { border-bottom: 0; }
.tip-grid,  .post-grid{ grid-template-columns: 1fr; }
.home-section { padding: 46px 0; }
.solver-banner { align-items: flex-start; flex-direction: column; padding: 24px; }
.solver-banner .button { width: 100%; }
.post-grid { gap: 12px; }
.article { padding: 22px 18px; border-radius: 16px; }
.site-footer__bottom { flex-direction: column; }
}
@media (max-width: 420px) {.game-heading { display: grid; grid-template-columns: 1fr auto; }
.game-heading .eyebrow,  .game-heading .game-intro { grid-column: 1 / -1; }
.game-heading h1 { font-size: 33px; }
.game-piece__grid { width: min(64px, 88%); }
.piece-tray { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.solver-board__cell.is-filled { background: var(--brand); box-shadow: inset 0 -2px 0 rgba(0,0,0,.09); }
.button:disabled { cursor: not-allowed; opacity: .48; }
.solver-piece-slot.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(56,88,233,.10); background: #f7f8ff; }
.solver-shape-option.is-selected { border-color: var(--brand); background: #f2f4ff; box-shadow: inset 0 0 0 1px rgba(56,88,233,.12); }
.solver-shape-grid i.is-filled { background: var(--brand); box-shadow: inset 0 -1px 0 rgba(0,0,0,.12); }
.solver-result-head p:not(.eyebrow) { margin: 0; color: var(--muted); }
.solver-mini-board i.is-filled { background: #8795a8; }
@media (max-width: 760px) {.solver-hero__inner .button { width: 100%; }
.solver-result-head .button { width: 100%; }
}
@media (max-width: 480px) {.solver-board-toolbar .button { width: 100%; }
.solver-board-toolbar .button--text { grid-column: 1 / -1; }
}
.score-box { position: relative; overflow: hidden; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; border: 1px solid transparent; }
.score-box.is-active { background: #eef1ff; border-color: #d7defe; }
.score-box.is-new-best { animation: bbo-best-pop .46s ease; }
.board-wrap { position: relative; overflow: hidden; }
.board-cell { appearance: none; width: 100%; height: 100%; padding: 0; border: 0; cursor: default; }
.board-cell:focus-visible { outline: 3px solid rgba(56,88,233,.42); outline-offset: -1px; }
.board-cell.is-new { animation: bbo-cell-place .18s ease-out; }
.board-cell.is-clearing { z-index: 1; animation: bbo-line-clear .2s ease-in forwards; }
.game-board.has-clearing-line .board-cell.is-clearing { box-shadow: inset 0 0 0 2px rgba(255,255,255,.68), 0 0 18px rgba(56,88,233,.24); }
.board-notice { position: absolute; left: 50%; top: 16%; z-index: 13; display: grid; gap: 3px; min-width: 138px; max-width: calc(100% - 30px); padding: 9px 15px 10px; border: 1px solid rgba(213,244,255,.58); border-radius: 15px; background: linear-gradient(180deg,rgba(20,57,126,.92),rgba(10,38,96,.90)); color: #fff; text-align: center; pointer-events: none; opacity: 0; transform: translate(-50%,-8px) scale(.94); box-shadow: 0 12px 30px rgba(3,22,62,.28), inset 0 1px 0 rgba(255,255,255,.20); backdrop-filter: blur(5px); }
.board-notice strong { font-size: 18px; line-height: 1.08; letter-spacing:-.018em; text-shadow:0 2px 8px rgba(2,20,59,.34); }
.board-notice span { color: #dff5ff; font-size: 11px; font-weight: 800; }
.board-notice.is-visible { animation: bbo-board-notice 1.18s cubic-bezier(.18,.78,.24,1) both; }
.game-piece { border: 1px solid transparent; transition: opacity .14s ease, background-color .14s ease, border-color .14s ease, transform .14s ease; }
.game-piece.is-selected { background: #eef1ff; border-color: #cdd6ff; transform: translateY(-2px); }
.game-piece.is-blocked { opacity: .32; cursor: not-allowed; filter: grayscale(.2); }
.game-piece.is-blocked:hover { background: transparent; }
.game-piece--ghost { background: transparent !important; border: 0 !important; opacity: .96; transform-origin: center; }
.game-piece--ghost .game-piece__grid i.is-filled { box-shadow: inset 0 -2px 0 rgba(0,0,0,.09), 0 7px 12px rgba(39,69,199,.14); }
.game-dialog__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 18px; }
.game-dialog__stats > div { min-width: 0; padding: 10px 6px; border-radius: 12px; background: var(--surface-soft); }
.game-dialog__stats span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.25; text-transform: uppercase; letter-spacing: .04em; }
.game-dialog__stats strong { display: block; margin-top: 2px; font-size: 18px; line-height: 1.25; font-variant-numeric: tabular-nums; }
@keyframes bbo-cell-place {
  0% { transform: scale(.78); opacity: .45; }

  70% { transform: scale(1.05); opacity: 1; }

  100% { transform: scale(1); opacity: 1; }

}
@keyframes bbo-line-clear {
  0% { transform: scale(1); opacity: 1; }

  45% { transform: scale(.86); background: #b8c4ff; opacity: 1; }

  100% { transform: scale(.28); opacity: 0; }

}
@keyframes bbo-board-notice {
  0% { opacity: 0; transform: translate(-50%,-13px) scale(.92); filter: blur(1px); }

  14% { opacity: 1; transform: translate(-50%,0) scale(1.035); filter: blur(0); }

  28%, 74% { opacity: 1; transform: translate(-50%,0) scale(1); filter: blur(0); }

  100% { opacity: 0; transform: translate(-50%,-9px) scale(.985); filter: blur(0); }

}
@keyframes bbo-best-pop {
  0%,100% { transform: scale(1); }

  45% { transform: scale(1.045); background: #fff7dd; border-color: #f8d877; }

}
@media (max-width: 760px) {.board-notice { top:14%; padding:8px 11px 9px; border-radius:13px; }
.board-notice strong { font-size: 16px; }
.game-piece.is-selected { transform: translateY(-1px); }
.game-dialog__stats { gap: 6px; }
.game-dialog__stats > div { padding: 9px 4px; }
}
.game-mode-bar { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin-bottom: 14px; padding: 10px; border: 1px solid var(--line); border-radius: 15px; background: #f8fafc; }
.game-mode-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 11px; background: #e8edf3; }
.game-mode-button { min-height: 34px; padding: 6px 11px; border: 0; border-radius: 8px; background: transparent; color: #536174; cursor: pointer; font-size: 13px; font-weight: 850; white-space: nowrap; }
.game-mode-button:hover { color: var(--text); }
.game-mode-button.is-active { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(23,36,58,.09); }
.game-mode-copy { min-width: 0; display: grid; gap: 1px; }
.game-mode-copy strong { font-size: 13px; line-height: 1.3; }
.game-mode-copy span { overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.challenge-target { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 11px; border: 1px solid #cfd7ff; border-radius: 12px; background: #f2f4ff; }
.challenge-target[hidden] { display: none; }
.challenge-target span { color: #526175; font-size: 11px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.challenge-target strong { color: var(--brand); font-size: 17px; font-variant-numeric: tabular-nums; }
.challenge-target em { justify-self: end; color: var(--muted); font-size: 12px; font-style: normal; font-weight: 700; text-align: right; }
.challenge-target.is-beaten { border-color: #b7e1c5; background: #effaf3; }
.challenge-target.is-beaten strong { color: #16803c; }
.game-history-card { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.game-history-card__head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 10px; }
.game-history-card__head h2 { margin: 0; font-size: 20px; }
.game-history-card__head .eyebrow { margin-bottom: 3px; }
.daily-streak { flex: 0 0 auto; min-width: 86px; padding: 8px 11px; border-radius: 11px; background: var(--surface-soft); text-align: center; }
.daily-streak span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.daily-streak strong { display: block; font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.game-history-list { display: grid; }
.game-history-empty { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.game-history-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 2px; border-top: 1px solid var(--line); }
.game-history-row:first-child { border-top: 0; }
.game-history-row > div { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.game-history-row strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.game-history-row span { color: var(--muted); font-size: 12px; font-weight: 700; }
.game-history-row__stats { flex: 0 0 auto; text-align: right; }
.game-dialog__panel { width: min(100%, 460px); }
.game-dialog__actions--share { grid-template-columns: 1fr 1fr; }
.game-dialog__actions--share .button--text { border-color: transparent; }
.share-feedback { min-height: 20px; margin: 9px 0 0 !important; font-size: 12px; font-weight: 750; }
@media (max-width: 560px) {.game-mode-bar { grid-template-columns: 1fr; gap: 7px; padding: 8px; }
.game-mode-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.game-mode-button { padding-inline: 7px; }
.game-mode-copy { padding: 0 3px 2px; }
.challenge-target { grid-template-columns: auto 1fr; }
.challenge-target em { grid-column: 1 / -1; justify-self: start; text-align: left; }
.game-history-card { padding: 14px; }
.game-history-card__head { align-items: flex-end; }
.game-history-row { gap: 8px; }
.game-history-row > div { display: grid; gap: 0; }
.game-history-row__stats { font-size: 11px !important; }
.game-dialog__actions--share { grid-template-columns: 1fr 1fr; gap: 7px; }
.game-dialog__actions--share .button { min-height: 42px; padding-inline: 8px; font-size: 13px; }
}
.solver-screenshot-stage canvas.is-dragging { cursor: grabbing; }
@media (max-width: 620px) {.solver-screenshot-actions .button { width: 100%; }
.solver-screenshot-toolbar .button { width: 100%; }
.solver-screenshot-toolbar .button--text { grid-column: 1 / -1; }
}
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(56,88,233,.34);
  outline-offset: 3px;
}
.site-nav .current-menu-item > a, 
.site-nav .current_page_item > a, 
.site-nav a[aria-current="page"] { color: var(--brand); }
body.admin-bar .site-header { top: 32px; }
.home-section[id],  .game-section{ scroll-margin-top: 88px; }
.game-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: #596579;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}
.game-dialog__close:hover { background: #f6f8fb; color: var(--text); }
.game-dialog__actions--share #bbo-play-again { grid-column: 1 / -1; }
.game-dialog__actions--share [data-dialog-close] { grid-column: 1 / -1; }
#bbo-game:fullscreen {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: auto;
  border: 0;
  border-radius: 0;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: var(--bg);
  box-shadow: none;
}
#bbo-game:fullscreen .board-wrap { max-width: min(68vh, 680px); }
#bbo-game:fullscreen .piece-area { max-width: 680px; margin-inline: auto; }
#bbo-game:fullscreen .game-toolbar, 
#bbo-game:fullscreen .game-mode-bar, 
#bbo-game:fullscreen .score-row, 
#bbo-game:fullscreen .challenge-target { width: min(100%, 680px); margin-inline: auto; }
#bbo-game:fullscreen .game-mode-bar { margin-bottom: 14px; }
.post-card { height: 100%; display: flex; flex-direction: column; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.post-card:hover { transform: translateY(-2px); border-color: #cbd4df; box-shadow: 0 12px 30px rgba(23,36,58,.07); }
.post-card__body { display: flex; flex: 1; flex-direction: column; }
.post-card__body h2 { margin-bottom: 8px; }
.post-card__body > p:not(.post-card__meta) { margin-top: 0; }
.post-card__body .text-link { margin-top: auto; }
.pagination .page-numbers.current { border-color: var(--brand); background: var(--brand); color: #fff; }
@media (min-width: 921px) {body.admin-bar .solver-panel--pieces { top: 120px; }
}
@media (max-width: 782px) {body.admin-bar .site-header { top: 46px; }
}
@media (max-width: 760px) {body.has-mobile-nav { overflow: hidden; }
.site-header__inner { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.site-nav { max-height: min(70vh, 520px); overflow: auto; }
.site-nav__list a { min-height: 46px; display: flex; align-items: center; border-radius: 9px; }
.site-nav__list a:active { background: #f4f6fa; }
.feature-strip { grid-template-columns: repeat(3, 1fr); }
.feature-strip > div { min-width: 0; padding: 12px 6px; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-right: 1px solid var(--line); border-bottom: 0; text-align: center; }
.feature-strip > div:last-child { border-right: 0; }
.feature-strip strong { font-size: 19px; line-height: 1.15; }
.feature-strip span { font-size: 11px; line-height: 1.25; }
.article-back .button { width: 100%; }
.site-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {.game-section { padding-top: 16px; }
.game-heading { margin-bottom: 12px; gap: 10px; }
.game-heading h1 { font-size: 32px; }
.game-card { padding: 10px; }
.score-row { gap: 5px; }
.score-box { min-height: 52px; padding-inline: 5px; }
.score-box strong { font-size: 19px; }
.piece-area { min-height: 118px; }
.piece-tray { min-height: 98px; }
.game-piece { min-height: 82px; }
.game-toolbar { grid-template-columns: .9fr 1.1fr; }
.game-dialog { align-items: end; padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.game-dialog__panel { max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 24px 16px 16px; border-radius: 22px 22px 14px 14px; }
.game-dialog__panel h2 { font-size: 30px; }
.game-dialog__score { font-size: 46px; }
.game-dialog__actions--share { grid-template-columns: 1fr 1fr; }
.game-dialog__actions--share #bbo-play-again, 
  .game-dialog__actions--share [data-dialog-close] { grid-column: 1 / -1; }
.game-dialog__close { top: 9px; right: 9px; }
}
@media (max-width: 360px) {.shell { width: min(calc(100% - 24px), var(--shell)); }
.game-heading h1 { font-size: 29px; }
.game-toolbar { grid-template-columns: 1fr; }
.game-dialog__actions--share { grid-template-columns: 1fr; }
.game-dialog__actions--share > * { grid-column: 1 !important; }
}
.solver-piece-slot.is-active .solver-piece-slot__empty { border-color: var(--brand); color: var(--brand); background: #eef1ff; }
.noscript-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #ecd59b; border-radius: 12px; background: #fffbef; color: #775b0a; font-weight: 700; }
.score-gain {
  position: absolute;
  right: 8px;
  top: 5px;
  z-index: 3;
  pointer-events: none;
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  animation: bbo-score-gain .92s cubic-bezier(.18,.78,.24,1) both;
}
.board-cell.is-new { animation-delay: var(--place-delay, 0ms); }
.game-board { transition: box-shadow .12s ease, transform .12s ease; }
.game-board.has-valid-drop { box-shadow: 0 0 0 3px rgba(56,88,233,.12); }
.game-board.has-invalid-drop { box-shadow: 0 0 0 3px rgba(217,45,32,.09); }
.game-board.is-drop-rejected { animation: bbo-drop-reject .24s ease; }
.game-piece--ghost { will-change: transform; }
.game-piece--ghost .game-piece__grid {
  width: 100%;
  max-width: none;
  gap: var(--ghost-gap, 4px);
}
.game-piece--ghost.is-valid-drop .game-piece__grid i.is-filled {
  background: #4e6cf0;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 7px 16px rgba(39,69,199,.18);
}
.game-piece--ghost.is-invalid-drop { opacity: .68; }
.game-piece--ghost.is-invalid-drop .game-piece__grid i.is-filled { background: #e77a73; }
.piece-tray.is-refilling .game-piece { animation: bbo-piece-refill .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--piece-index, 0) * 45ms); }
.game-piece.is-dragging { opacity: .12; transform: scale(.94); }
.game-piece.is-blocked { opacity: .26; }
.button.is-confirming, 
.game-mode-button.is-confirming {
  border-color: #f0b8b3 !important;
  background: #fff2f1 !important;
  color: #b42318 !important;
  box-shadow: none !important;
}
#bbo-new-game.is-confirming { min-width: 166px; }
.game-dialog__score-wrap { position: relative; display: inline-grid; place-items: center; margin: 4px auto 0; }
.game-dialog__score-wrap .game-dialog__score { margin: 4px 0; }
.game-dialog__badge {
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff5d6;
  color: #8a5b00;
  border: 1px solid #f4d47c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.game-dialog__badge[hidden] { display: none; }
@keyframes bbo-score-gain {
  0% { opacity: 0; transform: translateY(5px) scale(.88); }

  14% { opacity: 1; transform: translateY(0) scale(1.05); }

  34%, 68% { opacity: 1; transform: translateY(-2px) scale(1); }

  100% { opacity: 0; transform: translateY(-16px) scale(.97); }

}
@keyframes bbo-drop-reject {
  0%,100% { transform: translateX(0); }

  25% { transform: translateX(-3px); }

  55% { transform: translateX(3px); }

  80% { transform: translateX(-2px); }

}
@keyframes bbo-piece-refill {
  0% { opacity: 0; transform: translateY(8px) scale(.94); }

  100% { opacity: 1; transform: translateY(0) scale(1); }

}
@media (hover: none) and (pointer: coarse) {.game-piece:hover { background: transparent; }
}
@media (max-width: 560px) {.game-section { padding: 10px 0 12px; }
.game-section .shell { width: min(calc(100% - 12px), var(--shell)); }
.game-heading { align-items: start; margin-bottom: 8px; }
.game-heading .eyebrow { margin-bottom: 3px; font-size: 10px; letter-spacing: .07em; }
.game-heading h1 { margin-bottom: 4px; font-size: 29px; }
.game-intro {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    line-height: 1.38;
  }
.game-card { padding: 8px; border-radius: 18px; box-shadow: 0 10px 30px rgba(23,36,58,.09); }
.game-mode-bar { margin-bottom: 8px; padding: 6px; border-radius: 12px; }
.game-mode-switch { padding: 3px; border-radius: 9px; }
.game-mode-button { min-height: 32px; padding: 5px 6px; font-size: 12px; }
.game-mode-copy { padding-bottom: 0; }
.game-mode-copy strong { font-size: 11px; }
.game-mode-copy span { font-size: 10px; }
.score-row { margin-bottom: 8px; gap: 4px; }
.score-box { min-height: 46px; padding: 5px 4px; border-radius: 10px; }
.score-box span { font-size: 9px; letter-spacing: .04em; }
.score-box strong { font-size: 18px; }
.score-gain { right: 4px; top: 4px; font-size: 10px; }
.board-wrap { max-width: none; padding: 4px; border-radius: 12px; }
.game-board { gap: 4px; }
.board-cell { border-radius: 5px; }
.piece-area { min-height: 104px; padding-top: 6px; }
.piece-area__hint { min-height: 17px; margin: 0; font-size: 10px; line-height: 1.35; }
.piece-tray { min-height: 82px; gap: 2px; }
.game-piece { min-height: 72px; padding: 5px 2px; border-radius: 10px; }
.game-piece__grid { width: min(70px, 90%); gap: 3px; }
.game-toolbar { padding-top: 9px; gap: 5px; }
.game-toolbar .button { min-height: 40px; font-size: 12px; border-radius: 10px; }
#bbo-new-game.is-confirming { min-width: 0; font-size: 11px; }
.game-status { min-height: 18px; padding-top: 4px; font-size: 10px; line-height: 1.3; }
.challenge-target { margin-top: 4px; padding: 7px 8px; gap: 5px; }
.challenge-target em { font-size: 10px; }
.game-history-card { margin-top: 8px; }
.game-dialog__panel { padding-top: 21px; }
.game-dialog__score-wrap .game-dialog__score { font-size: 48px; }
.game-dialog__badge { bottom: -11px; }
}
@media (max-width: 420px) {.game-mode-copy span { display: none; }
.game-mode-bar { gap: 4px; }
.game-piece__grid { width: min(64px, 91%); }
.game-toolbar { grid-template-columns: .92fr 1.08fr; }
}
@media (max-width: 350px) {.game-section .shell { width: min(calc(100% - 8px), var(--shell)); }
.game-card { padding: 6px; }
.game-heading h1 { font-size: 27px; }
.game-board { gap: 3px; }
.board-wrap { padding: 3px; }
.piece-area { min-height: 96px; }
.piece-tray { min-height: 76px; }
.game-piece { min-height: 66px; }
}
@media (prefers-reduced-motion: reduce) {.score-gain { display: none; }
}
.section-heading__link { flex: 0 0 auto; }
.guide-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.guide-link-card { min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 3px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.guide-link-card:hover { transform: translateY(-2px); border-color: #c5cfda; box-shadow: 0 12px 30px rgba(23,36,58,.07); }
.guide-link-card > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #eef1ff; color: var(--brand); font-size: 12px; font-weight: 900; }
.guide-link-card strong { font-size: 17px; line-height: 1.3; }
.guide-link-card small { color: var(--muted); font-size: 13px; line-height: 1.45; }
.latest-guides-head { margin-top: 34px; }
.latest-guides-head h3 { margin-bottom: 14px; font-size: 20px; }
.post-grid--home .post-card__body h3, 
.post-grid--related .post-card__body h3 { margin-bottom: 8px; font-size: 20px; }
.post-card__body h3 a { text-decoration: none; }
.post-card__body h3 a:hover { color: var(--brand); }
.guide-cta .eyebrow { color: #91a6ff; }
.guide-cta .button--secondary { color: #fff; background: transparent; border-color: #46515f; }
.related-guides { margin-top: 42px; }
.post-grid--related .post-card__body { padding: 16px; }
.post-grid--related .post-card__body > p:not(.post-card__meta) { display: none; }
.site-footer__legal a { color: #b9c2cd; text-decoration: none; }
.site-footer__legal a:hover { color: #fff; }
@supports (content-visibility: auto) {.home-main > .home-section, 
  .related-guides { content-visibility: auto; contain-intrinsic-size: auto 560px; }
}
@media (max-width: 900px) {.guide-link-grid { grid-template-columns: 1fr; }
.guide-cta__actions .button { flex: 1; }
}
@media (max-width: 760px) {.site-header { background: #fff; backdrop-filter: none; }
.section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
.section-heading__link { align-self: flex-start; }
.guide-hero__actions .button,  .guide-cta__actions .button { width: 100%; }
}
.game-section--arcade {
  padding: 18px 0 16px;
  background: linear-gradient(180deg,#f8fbff 0,#eef5ff 72%,#f4f7fb 100%);
}
.game-shell { max-width: 840px; }
.game-heading--compact { margin-bottom: 10px; }
.game-heading--compact h1 { margin-bottom: 3px; font-size: clamp(30px,5vw,44px); }
.game-heading--compact .game-intro { max-width: 720px; font-size: 15px; }
.game-card--arcade {
  --arcade-blue: #1598f0;
  --arcade-blue-deep: #176cde;
  --arcade-navy: #12265a;
  --arcade-cell: #243761;
  --arcade-cell-dark: #1d2f58;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 14px 16px 18px;
  border: 1px solid rgba(13,72,173,.42);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 12%,rgba(255,255,255,.8) 0 1.6px,transparent 2.8px),
    radial-gradient(circle at 92% 10%,rgba(169,244,255,.8) 0 1.8px,transparent 3px),
    radial-gradient(circle at 18% 46%,rgba(255,255,255,.52) 0 1.4px,transparent 2.6px),
    radial-gradient(circle at 81% 58%,rgba(173,238,255,.62) 0 1.8px,transparent 3px),
    radial-gradient(circle at 55% 83%,rgba(255,255,255,.5) 0 1.4px,transparent 2.7px),
    linear-gradient(155deg,#38c4fb 0%,#1799f0 32%,#2678e8 70%,#1767d7 100%);
  box-shadow: 0 26px 70px rgba(23,84,171,.24), inset 0 1px 0 rgba(255,255,255,.42);
  color: #fff;
}
.game-card--arcade::before, 
.game-card--arcade::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(1px);
}
.game-card--arcade::before { width: 290px; height: 290px; left: -150px; top: 160px; background: radial-gradient(circle,rgba(98,223,255,.48),transparent 69%); }
.game-card--arcade::after { width: 340px; height: 340px; right: -190px; bottom: 55px; background: radial-gradient(circle,rgba(79,143,255,.48),transparent 70%); }
.arcade-topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 50px;
  margin-bottom: 4px;
}
.arcade-exit-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px;
  background: linear-gradient(180deg,#9b63ff,#6c35ed);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(37,13,108,.35);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.32),0 4px 0 #4d24bd,0 8px 14px rgba(52,27,146,.24);
  transition: transform .12s ease,filter .12s ease;
}
.arcade-exit-button svg { width: 22px; height: 22px; fill: currentColor; }
.arcade-exit-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.arcade-exit-button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.2),0 2px 0 #4d24bd; }
.arcade-controls { display: flex; gap: 9px; }
.arcade-icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
  background: linear-gradient(180deg,#1c79df,#1154b9);
  color: #eefaff;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.24),0 4px 0 #0d408f,0 8px 13px rgba(6,43,112,.22);
  transition: transform .12s ease,filter .12s ease,opacity .12s ease;
}
.arcade-icon-button svg { width: 25px; height: 25px; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.arcade-icon-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.arcade-icon-button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.16),0 2px 0 #0d408f; }
.arcade-icon-button--settings { color: #bfefff; }
.arcade-icon-button.is-muted { opacity: .55; }
.arcade-hud {
  position: relative;
  z-index: 4;
  min-height: 148px;
  display: grid;
  grid-template-columns: minmax(118px,1fr) auto minmax(118px,1fr);
  align-items: start;
  gap: 12px;
  margin-bottom: 14px;
}
.arcade-mode {
  grid-column: 1;
  justify-self: start;
  width: min(100%,212px);
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding: 6px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  background: rgba(10,52,141,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12),0 8px 18px rgba(8,42,112,.18);
  backdrop-filter: blur(5px);
}
.arcade-mode .game-mode-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: rgba(9,34,92,.64); border-radius: 11px; }
.arcade-mode .game-mode-button {
  min-height: 34px;
  padding: 5px 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #d9edff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}
.arcade-mode .game-mode-button:hover { color: #fff; }
.arcade-mode .game-mode-button.is-active {
  color: #fff;
  background: linear-gradient(180deg,#8a62ff,#6335ee);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42),0 3px 0 #4923bd,0 7px 12px rgba(52,27,146,.28);
}
.arcade-mode .game-mode-copy { padding: 1px 5px 3px; }
.arcade-mode .game-mode-copy strong { display: block; color: #fff; font-size: 12px; line-height: 1.2; }
.arcade-mode .game-mode-copy span { display: block; color: #d9edff; font-size: 10px; line-height: 1.25; }
.arcade-hud-spacer { grid-column: 3; width: min(100%,212px); justify-self: end; }
.score-row--arcade {
  grid-column: 2;
  position: relative;
  display: block;
  width: 188px;
  margin: 0;
  padding-bottom: 34px;
  filter: drop-shadow(0 8px 12px rgba(4,37,105,.28));
}
.score-row--arcade .score-box { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.score-row--arcade .score-box--best {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 11px;
  border: 2px solid #3f8df2;
  border-radius: 15px 15px 8px 8px;
  background: linear-gradient(180deg,#214ba2,#17377d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.score-row--arcade .score-box--best .score-box__best-line { display: inline-flex; align-items: center; gap: 5px; color: #ffc11e; font-size: 10px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.score-crown { color: #ffc21f; font-size: 24px; line-height: 1; transform: translateY(-1px); }
.score-row--arcade .score-box--best strong { color: #ffc21f; font-size: 27px; line-height: 1; text-shadow: 0 2px 0 rgba(92,52,0,.42); }
.score-row--arcade .score-box--score {
  min-height: 76px;
  display: grid;
  place-items: center;
  margin-top: -1px;
  border: 2px solid #245cb7;
  border-radius: 7px 7px 15px 15px;
  background: linear-gradient(180deg,#112d69,#10275b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 4px 0 rgba(7,31,84,.25);
}
.score-row--arcade .score-box--score strong { color: #fff; font-size: 49px; line-height: 1; letter-spacing: -.04em; text-shadow: 0 3px 0 rgba(0,0,0,.28); }
.score-row--arcade .score-box--combo {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-2px) scale(.94);
  min-width: 92px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: linear-gradient(180deg,rgba(19,67,163,.9),rgba(12,44,110,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 5px 10px rgba(7,31,84,.18);
  color: #dff2ff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .18s ease,opacity .18s ease,visibility .18s ease,background .18s ease;
}
.score-row--arcade .score-box--combo span { color: #dff2ff; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.score-row--arcade .score-box--combo strong { color: #fff; font-size: 16px; line-height: 1; }
.score-row--arcade .score-box--combo.is-active { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) scale(1); background: linear-gradient(180deg,#ffb51c,#ef8700); border-color: #ffd572; }
.score-row--arcade .score-box.is-new-best { animation: bbo-best-pop .46s ease; }
.board-wrap--arcade {
  position: relative;
  z-index: 3;
  width: min(100%,620px);
  max-width: 620px;
  margin: 0 auto;
  padding: 7px;
  border: 3px solid #12255a;
  border-radius: 18px;
  background: linear-gradient(180deg,#1b316e,#0f214f);
  box-shadow: 0 5px 0 #0c1c45,0 13px 25px rgba(6,34,89,.28),inset 0 1px 0 rgba(255,255,255,.12);
}
.game-card--arcade .game-board { gap: 4px; padding: 2px; border-radius: 10px; background: #132452; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.game-card--arcade .board-cell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(10,27,68,.42);
  border-radius: 7px;
  background: linear-gradient(180deg,#273a67,#21345f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025),inset 0 -1px 0 rgba(5,21,54,.22);
}
.game-card--arcade .board-cell.is-filled, 
.game-card--arcade .game-piece__grid i.is-filled {
  --tile-light: #5fc4ff;
  --tile-main: #168fee;
  --tile-dark: #0870c8;
  border: 1px solid rgba(4,34,83,.25);
  background:
    linear-gradient(135deg,rgba(255,255,255,.42) 0 11%,transparent 12% 84%,rgba(0,0,0,.16) 85%),
    linear-gradient(225deg,rgba(255,255,255,.18) 0 10%,transparent 11% 84%,rgba(0,0,0,.18) 85%),
    linear-gradient(180deg,var(--tile-light) 0%,var(--tile-main) 48%,var(--tile-dark) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.23),inset 0 -4px 0 rgba(0,0,0,.14),inset 3px 0 0 rgba(255,255,255,.06),0 1px 2px rgba(3,25,72,.22);
}
.game-card--arcade .board-cell.tile-blue, .game-card--arcade .piece-color-blue .game-piece__grid i.is-filled { --tile-light:#57c9ff; --tile-main:#1398ef; --tile-dark:#0876c8; }
.game-card--arcade .board-cell.tile-green, .game-card--arcade .piece-color-green .game-piece__grid i.is-filled { --tile-light:#63f26c; --tile-main:#24d43d; --tile-dark:#10a929; }
.game-card--arcade .board-cell.tile-yellow, .game-card--arcade .piece-color-yellow .game-piece__grid i.is-filled { --tile-light:#fff16a; --tile-main:#ffd51d; --tile-dark:#df9b00; }
.game-card--arcade .board-cell.tile-red, .game-card--arcade .piece-color-red .game-piece__grid i.is-filled { --tile-light:#ff7471; --tile-main:#f84640; --tile-dark:#c52725; }
.game-card--arcade .board-cell.tile-purple, .game-card--arcade .piece-color-purple .game-piece__grid i.is-filled { --tile-light:#c86cff; --tile-main:#9941eb; --tile-dark:#6f24bd; }
.game-card--arcade .board-cell.is-preview[data-preview-color="blue"] { --tile-light:#8fe0ff; --tile-main:#56b9ff; --tile-dark:#2986d6; }
.game-card--arcade .board-cell.is-preview[data-preview-color="green"] { --tile-light:#8bf497; --tile-main:#57df69; --tile-dark:#26ac3a; }
.game-card--arcade .board-cell.is-preview[data-preview-color="yellow"] { --tile-light:#fff59b; --tile-main:#ffe563; --tile-dark:#dda91d; }
.game-card--arcade .board-cell.is-preview[data-preview-color="red"] { --tile-light:#ffaaa7; --tile-main:#ff7773; --tile-dark:#cf4946; }
.game-card--arcade .board-cell.is-preview[data-preview-color="purple"] { --tile-light:#dda1ff; --tile-main:#bd79f3; --tile-dark:#8742c5; }
.game-card--arcade .board-cell.is-preview { transform: scale(.92); background: linear-gradient(180deg,var(--tile-light),var(--tile-main) 55%,var(--tile-dark)); box-shadow: inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.12); opacity: .9; }
.game-card--arcade .board-cell.is-invalid { background: linear-gradient(180deg,#ff8f8b,#e94440); opacity: .78; }
.game-card--arcade .board-cell.is-clearing { filter: brightness(1.45) saturate(.72); transform: scale(.86); }
.game-card--arcade .game-board.has-valid-drop { box-shadow: 0 0 0 3px rgba(143,240,255,.22); }
.game-card--arcade .game-board.has-invalid-drop { box-shadow: 0 0 0 3px rgba(255,112,112,.2); }
.game-card--arcade .game-board.is-drop-rejected { animation: bbo-drop-reject .24s ease; }
.piece-area--arcade { position: relative; z-index: 3; min-height: 132px; padding-top: 10px; }
.game-card--arcade .piece-area__hint { min-height: 18px; margin: 0; color: rgba(236,249,255,.84); font-size: 11px; text-shadow: 0 1px 1px rgba(7,43,110,.35); }
.game-card--arcade .piece-tray { min-height: 108px; gap: 8px; }
.game-card--arcade .game-piece { min-height: 94px; padding: 7px 4px; border-radius: 18px; }
.game-card--arcade .game-piece:hover { background: rgba(255,255,255,.06); }
.game-card--arcade .game-piece.is-selected { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 2px rgba(255,255,255,.16); }
.game-card--arcade .game-piece__grid { width: min(94px,86%); gap: 3px; filter: drop-shadow(0 5px 5px rgba(7,41,104,.28)); }
.game-card--arcade .game-piece__grid i { border-radius: 4px; }
.game-card--arcade .game-piece.is-blocked { opacity: .3; filter: grayscale(.35); }
.game-card--arcade .game-piece--ghost .game-piece__grid i.is-filled { border-radius: 7px; }
.game-piece--ghost .game-piece__grid i.is-filled { border: 1px solid rgba(4,34,83,.25); box-shadow: inset 0 2px 0 rgba(255,255,255,.22),inset 0 -4px 0 rgba(0,0,0,.14),0 2px 4px rgba(3,25,72,.2); }
.piece-color-blue .game-piece__grid i.is-filled { --tile-light:#57c9ff; --tile-main:#1398ef; --tile-dark:#0876c8; }
.piece-color-green .game-piece__grid i.is-filled { --tile-light:#63f26c; --tile-main:#24d43d; --tile-dark:#10a929; }
.piece-color-yellow .game-piece__grid i.is-filled { --tile-light:#fff16a; --tile-main:#ffd51d; --tile-dark:#df9b00; }
.piece-color-red .game-piece__grid i.is-filled { --tile-light:#ff7471; --tile-main:#f84640; --tile-dark:#c52725; }
.piece-color-purple .game-piece__grid i.is-filled { --tile-light:#c86cff; --tile-main:#9941eb; --tile-dark:#6f24bd; }
.piece-tray.is-refilling .game-piece { animation: bbo-piece-refill .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--piece-index,0) * 45ms); }
.game-toolbar--arcade {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  width: min(100%,580px);
  margin: 2px auto 0;
  padding: 0 4px;
  border-top: 0;
}
.game-toolbar--arcade.is-three-actions { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 440px; }
.arcade-power-button {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 900;
}
.arcade-power-button__disc {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 5px solid #173873;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%,#fff 0 8%,#eaf4ff 9% 60%,#cfe4ff 61% 100%);
  color: #7544ee;
  font-size: 29px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(255,255,255,.7);
  box-shadow: inset 0 0 0 3px #7ec9ff,0 4px 0 #0c2759,0 7px 11px rgba(5,38,94,.28);
  transition: transform .12s ease,filter .12s ease;
}
.arcade-power-button--solver .arcade-power-button__disc { color: #f34a2d; }
.arcade-power-button--rules .arcade-power-button__disc { color: #e19a00; font-size: 27px; }
.arcade-power-button--fullscreen .arcade-power-button__disc { color: #1377dc; font-size: 25px; }
.arcade-power-button:hover .arcade-power-button__disc { filter: brightness(1.04); transform: translateY(-2px); }
.arcade-power-button:active .arcade-power-button__disc { transform: translateY(2px); box-shadow: inset 0 0 0 3px #7ec9ff,0 2px 0 #0c2759; }
.arcade-power-button__label {
  min-width: 62px;
  min-height: 23px;
  display: grid;
  place-items: center;
  padding: 3px 7px 2px;
  border: 2px solid #087b20;
  border-radius: 7px;
  background: linear-gradient(180deg,#20e442,#05b927);
  color: #fff;
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,71,18,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 3px 0 #056e19;
}
.arcade-power-button.is-confirming .arcade-power-button__label, 
.arcade-mode .game-mode-button.is-confirming { background: linear-gradient(180deg,#ffbc2d,#e77a00)!important; border-color: #ffd063!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 3px 0 #a94f00!important; color:#fff!important; }
.game-card--arcade .game-status { position: relative; z-index: 3; min-height: 20px; padding-top: 7px; color: #dff2ff; font-size: 11px; text-align: center; }
.game-card--arcade .challenge-target { position: relative; z-index: 3; border-color: rgba(255,255,255,.24); background: rgba(11,54,136,.5); color: #fff; }
.game-card--arcade .challenge-target span, .game-card--arcade .challenge-target em { color: #dff2ff; }
.game-history-card { border-color: #d6e3f7; background: linear-gradient(180deg,#fff,#f8fbff); box-shadow: 0 12px 30px rgba(35,76,136,.06); }
.game-history-card__head h2 { color: #15315f; }
.game-history-card__head .eyebrow { color: #176fe3; }
.daily-streak { background: #eaf3ff; color: #123b79; }
.daily-streak span { color: #52709b; }
.game-history-row { border-top-color: #e1e9f5; }
.game-history-row strong { color: #14356a; }
.game-history-row__stats { color: #51729e!important; }
.game-settings-dialog[hidden] { display: none; }
.game-settings-dialog { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 18px; }
.game-settings-dialog__backdrop { position: absolute; inset: 0; background: rgba(3,17,49,.72); backdrop-filter: blur(3px); }
.game-settings-dialog__panel {
  position: relative;
  width: min(100%,440px);
  padding: 24px 22px 20px;
  border: 2px solid #3765c9;
  border-radius: 26px;
  background: linear-gradient(180deg,#6f99f4,#5a80df);
  color: #fff;
  text-align: center;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.3),0 7px 0 #3458b8,0 30px 80px rgba(2,20,61,.5);
}
.game-settings-dialog__panel h2 { margin: 0 42px 18px; color: #fff; font-size: 36px; text-shadow: 0 3px 0 rgba(34,62,135,.42); }
.game-settings-dialog__close { position: absolute; right: 11px; top: 7px; width: 44px; height: 44px; border: 0; background: transparent; color: #dce8ff; cursor: pointer; font-size: 38px; line-height: 1; font-weight: 900; text-shadow: 0 2px 0 rgba(38,70,144,.4); }
.game-settings-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-action { min-height: 55px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 14px; color: #fff; text-decoration: none; cursor: pointer; font-weight: 900; font-size: 17px; text-shadow: 0 1px 0 rgba(0,0,0,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 rgba(22,54,130,.68); }
.settings-action--green { background: linear-gradient(180deg,#19e33d,#08b32a); box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 #087e20; }
.settings-action--blue { background: linear-gradient(180deg,#3b8deb,#1760ca); }
.settings-action--gold { background: linear-gradient(180deg,#ffc82b,#f09a00); box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 4px 0 #bb6800; }
.settings-action--continue { grid-column: 1 / -1; }
.settings-action:hover { filter: brightness(1.05); }
.game-dialog__backdrop { background: rgba(3,17,49,.72); backdrop-filter: blur(3px); }
.game-dialog__panel { border: 2px solid #3765c9; background: linear-gradient(180deg,#6c94f1,#5a80df); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.26),0 7px 0 #3458b8,0 30px 80px rgba(2,20,61,.5); }
.game-dialog__panel .eyebrow { color: #dce9ff; }
.game-dialog__panel h2 { color: #fff; text-shadow: 0 3px 0 rgba(36,62,130,.38); }
.game-dialog__panel > p:not(.eyebrow) { color: #e7f1ff; }
.game-dialog__score { color: #fff; text-shadow: 0 4px 0 rgba(22,49,112,.35); }
.game-dialog__stats > div { border-color: rgba(255,255,255,.18); background: rgba(31,58,145,.48); }
.game-dialog__stats span { color: #dbe9ff; }
.game-dialog__close { color: #e3edff; background: transparent; border-color: transparent; font-size: 32px; }
.game-dialog__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.game-dialog__actions .button { border-color: rgba(255,255,255,.28); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
.game-dialog__actions .button--primary { background: linear-gradient(180deg,#18e33d,#08b52a); box-shadow: 0 3px 0 #087e20; }
.game-dialog__actions .button--secondary { background: linear-gradient(180deg,#3a89ec,#175ec9); box-shadow: 0 3px 0 #104899; }
.game-dialog__actions .button--text { background: rgba(35,57,138,.5); }
.share-feedback { color: #eef6ff; }
#bbo-game:fullscreen {
  overflow: auto;
  min-height: 100%;
  padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  border-radius: 0;
  background:
    radial-gradient(circle at 10% 18%,rgba(255,255,255,.65) 0 2px,transparent 3px),
    radial-gradient(circle at 88% 14%,rgba(183,240,255,.65) 0 2px,transparent 3px),
    linear-gradient(160deg,#37b9fb 0%,#188fe9 38%,#2576e9 72%,#176ad7 100%);
}
#bbo-game:fullscreen .arcade-topbar, #bbo-game:fullscreen .arcade-hud { max-width: 760px; margin-inline: auto; }
#bbo-game:fullscreen .board-wrap--arcade { width: min(72vh,660px); }
#bbo-game:fullscreen .piece-area--arcade, #bbo-game:fullscreen .game-toolbar--arcade { max-width: 660px; margin-inline: auto; }
.home .site-header { background: rgba(8,13,25,.97); border-bottom-color: rgba(255,255,255,.08); backdrop-filter: blur(14px); }
.home .brand__link, .home .site-nav a, .home .nav-toggle { color: #f8fbff; }
.home .site-nav a:hover, .home .site-nav a:focus { color: #8fdcff; }
.home .brand__mark { background: #f8fbff; }
.home .brand__mark i { background: #111a32; }
:root { --brand: #176fe3; --brand-dark: #0e56c2; }
.solver-board__cell.is-filled { border-color: #0869b7; background: linear-gradient(180deg,#57c9ff,#1398ef 48%,#0876c8); box-shadow: inset 0 2px 0 rgba(255,255,255,.24),inset 0 -4px 0 rgba(0,0,0,.13); }
@media (max-width: 760px) {.home .site-nav { background: #111a2f; border-color: #273653; }
.home .site-nav__list li + li { border-top-color: #273653; }
.home .site-nav a { color: #eef7ff; }
}
@media (max-width: 620px) {.game-section--arcade { padding: 4px 0 12px; }
.game-section--arcade .game-shell { width: 100%; }
.game-heading--compact { width: min(calc(100% - 18px),var(--shell)); margin: 0 auto 5px; }
.game-heading--compact .eyebrow, .game-heading--compact .game-intro { display: none; }
.game-heading--compact h1 { margin: 0; font-size: 18px; line-height: 1.25; color: #102653; }
.game-card--arcade { padding: 8px 7px 13px; border-inline: 0; border-radius: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.32); }
.arcade-topbar { min-height: 45px; margin-bottom: 1px; }
.arcade-exit-button { min-height: 38px; padding: 6px 11px 6px 8px; border-radius: 10px; font-size: 12px; box-shadow: inset 0 2px 0 rgba(255,255,255,.3),0 3px 0 #4d24bd,0 6px 10px rgba(52,27,146,.22); }
.arcade-exit-button svg { width: 20px; height: 20px; }
.arcade-controls { gap: 6px; }
.arcade-icon-button { width: 38px; height: 38px; padding: 8px; box-shadow: inset 0 2px 0 rgba(255,255,255,.22),0 3px 0 #0d408f,0 6px 10px rgba(6,43,112,.2); }
.arcade-icon-button svg { width: 22px; height: 22px; }
.arcade-hud { min-height: 126px; grid-template-columns: 108px 146px 108px; justify-content: space-between; gap: 4px; margin-bottom: 12px; }
.arcade-mode { width: 108px; margin-top: 2px; padding: 4px; border-radius: 12px; }
.arcade-mode .game-mode-switch { padding: 2px; gap: 2px; }
.arcade-mode .game-mode-button { min-height: 29px; padding: 4px 2px; font-size: 9px; }
.arcade-mode .game-mode-copy { display: none; }
.arcade-hud-spacer { width: 108px; }
.score-row--arcade { width: 146px; padding-bottom: 28px; }
.score-row--arcade .score-box--best { min-height: 43px; gap: 5px; padding: 5px 6px; border-radius: 12px 12px 6px 6px; }
.score-row--arcade .score-box--best .score-box__best-line { font-size: 8px; }
.score-crown { font-size: 19px; }
.score-row--arcade .score-box--best strong { font-size: 20px; }
.score-row--arcade .score-box--score { min-height: 57px; border-radius: 5px 5px 12px 12px; }
.score-row--arcade .score-box--score strong { font-size: 37px; }
.score-row--arcade .score-box--combo { top: calc(100% + 6px); min-width: 72px; min-height: 22px; padding: 3px 7px; }
.score-row--arcade .score-box--combo span { display: none; }
.score-row--arcade .score-box--combo strong { font-size: 12px; }
.board-wrap--arcade { width: 100%; padding: 5px; border-width: 3px; border-radius: 14px; }
.game-card--arcade .game-board { gap: 3px; padding: 1px; }
.game-card--arcade .board-cell { border-radius: 5px; }
.piece-area--arcade { min-height: 102px; padding-top: 7px; }
.game-card--arcade .piece-area__hint { min-height: 13px; font-size: 9px; }
.game-card--arcade .piece-tray { min-height: 86px; gap: 2px; }
.game-card--arcade .game-piece { min-height: 76px; padding: 4px 2px; }
.game-card--arcade .game-piece__grid { width: min(78px,88%); gap: 2.5px; }
.game-toolbar--arcade { gap: 5px; width: min(100%,390px); padding-inline: 2px; }
.arcade-power-button { gap: 4px; }
.arcade-power-button__disc { width: 48px; height: 48px; border-width: 4px; font-size: 24px; box-shadow: inset 0 0 0 2px #7ec9ff,0 3px 0 #0c2759,0 5px 9px rgba(5,38,94,.25); }
.arcade-power-button--rules .arcade-power-button__disc { font-size: 23px; }
.arcade-power-button--fullscreen .arcade-power-button__disc { font-size: 21px; }
.arcade-power-button__label { min-width: 52px; min-height: 20px; padding: 2px 5px; border-width: 1.5px; border-radius: 6px; font-size: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4),0 2px 0 #056e19; }
.game-card--arcade .game-status { min-height: 16px; padding-top: 5px; font-size: 9px; }
.game-history-card { margin-top: 10px; }
.game-settings-dialog { padding: 12px; }
.game-settings-dialog__panel { padding: 21px 16px 17px; border-radius: 24px; }
.game-settings-dialog__panel h2 { margin-bottom: 14px; font-size: 31px; }
.game-settings-dialog__close { right: 9px; top: 6px; }
.settings-action { min-height: 50px; font-size: 15px; }
.game-dialog { align-items: center; }
.game-dialog__panel { padding: 25px 16px 17px; border-radius: 24px; }
#bbo-game:fullscreen .arcade-hud { grid-template-columns: 108px 142px 108px; }
}
@media (max-width: 390px) {.arcade-hud { grid-template-columns: 96px 132px 96px; min-height: 104px; }
.arcade-mode, .arcade-hud-spacer { width: 96px; }
.arcade-mode .game-mode-button { font-size: 8.5px; }
.score-row--arcade { width: 132px; }
.score-row--arcade .score-box--best strong { font-size: 18px; }
.score-row--arcade .score-box--score strong { font-size: 34px; }
.game-card--arcade .game-board { gap: 2.5px; }
.piece-area--arcade { min-height: 96px; }
.game-card--arcade .piece-tray { min-height: 80px; }
.game-card--arcade .game-piece { min-height: 70px; }
.game-card--arcade .game-piece__grid { width: min(69px,89%); }
.arcade-power-button__disc { width: 44px; height: 44px; }
.arcade-power-button__label { min-width: 47px; font-size: 7.5px; }
}
@media (prefers-reduced-motion: reduce) {.arcade-exit-button, .arcade-icon-button, .arcade-power-button__disc { transition: none; }
}
@media (max-width: 620px) {body.home .site-header { display: none; }
body.home .game-heading--compact {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
.game-section--arcade { padding: 0 0 10px; }
.game-card--arcade {
    padding: 7px 6px 11px;
    min-height: 0;
  }
.arcade-topbar {
    min-height: 42px;
    margin-bottom: 0;
  }
.arcade-exit-button {
    min-height: 36px;
    padding: 5px 10px 5px 8px;
    font-size: 11px;
  }
.arcade-exit-button svg { width: 19px; height: 19px; }
.arcade-icon-button { width: 36px; height: 36px; padding: 7px; }
.arcade-icon-button svg { width: 21px; height: 21px; }
.arcade-hud {
    display: block;
    min-height: 94px;
    margin-bottom: 4px;
  }
.arcade-mode {
    position: absolute;
    left: 0;
    top: 2px;
    width: 100px;
    margin: 0;
    padding: 3px;
    border-radius: 11px;
  }
.arcade-mode .game-mode-button {
    min-height: 27px;
    padding: 3px 2px;
    font-size: 8.5px;
  }
.arcade-hud-spacer { display: none; }
.score-row--arcade {
    width: 132px;
    margin: 0 auto;
  }
.score-row--arcade .score-box--best {
    min-height: 38px;
    gap: 4px;
    padding: 4px 5px;
  }
.score-row--arcade .score-box--best .score-box__best-line { font-size: 7.5px; }
.score-crown { font-size: 17px; }
.score-row--arcade .score-box--best strong { font-size: 18px; }
.score-row--arcade .score-box--score {
    position: relative;
    min-height: 50px;
  }
.score-row--arcade .score-box--score strong { font-size: 34px; }
.score-row--arcade .score-box--combo {
    left: 50%;
    right: auto;
    top: calc(100% + 4px);
    bottom: auto;
    min-width: 56px;
    min-height: 18px;
    padding: 2px 5px;
    transform: translateX(-50%) translateY(-2px) scale(.96);
    border-radius: 8px;
  }
.score-row--arcade .score-box--combo strong { font-size: 9px; }
.score-row--arcade .score-box--combo.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
  }
.board-wrap--arcade {
    width: min(91vw, 404px);
    padding: 5px;
    border-radius: 13px;
  }
.game-card--arcade .game-board { gap: 2.7px; }
.game-card--arcade .board-cell { border-radius: 4.5px; }
.piece-area--arcade {
    min-height: 77px;
    padding-top: 5px;
  }
.game-card--arcade .piece-area__hint { display: none; }
.game-card--arcade .piece-tray {
    min-height: 73px;
    gap: 2px;
  }
.game-card--arcade .game-piece {
    min-height: 66px;
    padding: 3px 1px;
  }
.game-card--arcade .game-piece__grid {
    width: min(64px,86%);
    gap: 2px;
  }
.game-toolbar--arcade {
    width: min(100%,350px);
    gap: 4px;
    margin-top: 0;
  }
.arcade-power-button { gap: 3px; }
.arcade-power-button__disc {
    width: 42px;
    height: 42px;
    border-width: 3px;
    font-size: 21px;
  }
.arcade-power-button__label {
    min-width: 45px;
    min-height: 18px;
    padding: 1px 4px;
    font-size: 7px;
  }
.game-card--arcade .game-status:empty { display: none; }
.game-card--arcade .game-status:not(:empty) {
    min-height: 14px;
    padding-top: 4px;
    font-size: 8.5px;
  }
}
@media (max-width: 620px) and (max-height: 760px) {.arcade-topbar { min-height: 38px; }
.arcade-exit-button { min-height: 33px; }
.arcade-icon-button { width: 33px; height: 33px; }
.arcade-hud { min-height: 84px; }
.arcade-mode { width: 92px; }
.score-row--arcade { width: 122px; }
.score-row--arcade .score-box--best { min-height: 34px; }
.score-row--arcade .score-box--score { min-height: 45px; }
.score-row--arcade .score-box--score strong { font-size: 30px; }
.board-wrap--arcade { width: min(84vw, 365px); }
.piece-area--arcade { min-height: 68px; }
.game-card--arcade .piece-tray { min-height: 64px; }
.game-card--arcade .game-piece { min-height: 58px; }
.game-card--arcade .game-piece__grid { width: min(57px,84%); }
.arcade-power-button__disc { width: 38px; height: 38px; font-size: 19px; }
.arcade-power-button__label { min-width: 42px; font-size: 6.5px; }
}
.game-piece--ghost {
  transform-origin: 0 0;
  contain: layout paint style;
  will-change: transform,opacity;
}
.game-piece--ghost .game-piece__grid {
  column-gap: var(--ghost-gap-x,var(--ghost-gap,3px));
  row-gap: var(--ghost-gap-y,var(--ghost-gap,3px));
}
.game-piece--ghost.is-dropping {
  transition: transform 90ms cubic-bezier(.16,.82,.28,1),opacity 95ms ease-out;
}
.game-piece--ghost.is-returning {
  transition: transform 120ms cubic-bezier(.2,.72,.28,1),opacity 110ms ease-out;
}
.game-card--arcade .board-cell.is-preview {
  transform: scale(.97);
  opacity: .76;
  filter: saturate(.92) brightness(1.06);
}
.game-card--arcade .board-cell.is-invalid {
  opacity: .48;
  filter: saturate(.72);
}
.game-card--arcade .game-board.has-valid-drop {
  box-shadow: inset 0 0 0 1px rgba(124,225,255,.12),0 0 0 2px rgba(124,225,255,.10);
}
.game-card--arcade .game-board.has-invalid-drop {
  box-shadow: inset 0 0 0 1px rgba(255,120,120,.10);
}
.game-card--arcade .board-cell.is-clearing {
  animation-delay: var(--clear-delay,0ms);
  animation-duration: 165ms;
  animation-timing-function: cubic-bezier(.2,.7,.3,1);
}
.score-box--score.is-score-bump strong {
  animation: bbo-score-bump 250ms cubic-bezier(.18,.8,.3,1);
}
.game-card--arcade .game-piece.is-dragging {
  opacity: .08;
  transform: translateY(2px) scale(.92);
}
html.is-game-dragging, 
html.is-game-dragging body {
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
@keyframes bbo-score-bump {
  0% { transform: scale(1); }

  45% { transform: scale(1.075); }

  100% { transform: scale(1); }

}
@media (hover:none) and (pointer:coarse) {.game-card--arcade .game-piece { -webkit-tap-highlight-color: transparent; }
.game-card--arcade .board-cell { -webkit-tap-highlight-color: transparent; }
}
.game-card--arcade .board-cell.is-new {
  animation-name: bbo-cell-place-arcade;
  animation-duration: 230ms;
  animation-timing-function: cubic-bezier(.16,.82,.24,1);
}
.game-card--arcade .board-cell.is-clearing {
  animation-name: bbo-line-clear-arcade;
}
@keyframes bbo-cell-place-arcade {
  0% { transform: scale(.78); opacity: .36; filter: brightness(1.22) saturate(.9); }

  46% { transform: scale(1.07); opacity: 1; filter: brightness(1.12) saturate(1.05); }

  72% { transform: scale(.985); opacity: 1; filter: brightness(1.04); }

  100% { transform: scale(1); opacity: 1; filter: brightness(1); }

}
@keyframes bbo-line-clear-arcade {
  0%, 12% { transform: scale(1); opacity: 1; filter: brightness(1) saturate(1); }

  38% { transform: scale(1.055); opacity: 1; filter: brightness(1.62) saturate(.9); }

  60% { transform: scale(.985); opacity: 1; filter: brightness(1.38) saturate(.82); }

  100% { transform: scale(.52); opacity: 0; filter: brightness(1.82) saturate(.68); }

}
.game-settings-dialog__toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 14px;
}
.settings-toggle {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 13px;
  background: rgba(30,63,150,.58);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 rgba(22,54,130,.5);
  text-shadow: 0 1px 0 rgba(0,0,0,.16);
  transition: transform .1s ease,filter .1s ease,background-color .1s ease,opacity .1s ease;
}
.settings-toggle__icon {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  font-size: 18px;
  line-height: 1;
}
.settings-toggle.is-off { background: rgba(42,54,105,.58); color: #d4def1; }
.settings-toggle.is-off .settings-toggle__icon { opacity: .62; }
.settings-toggle:active:not(:disabled), 
.settings-action:active:not(:disabled) { transform: translateY(2px); }
.settings-toggle:disabled {
  cursor: not-allowed;
  opacity: .48;
  box-shadow: none;
}
.settings-action.is-confirming {
  background: linear-gradient(180deg,#ffbf2f,#e77800)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35),0 4px 0 #a94f00!important;
}
.game-card--arcade button, 
.game-card--arcade a, 
.game-settings-dialog button, 
.game-settings-dialog a, 
.game-dialog button, 
.game-dialog a {
  -webkit-tap-highlight-color: transparent;
}
.game-card--arcade button:focus-visible, 
.game-card--arcade a:focus-visible, 
.game-settings-dialog button:focus-visible, 
.game-settings-dialog a:focus-visible, 
.game-dialog button:focus-visible, 
.game-dialog a:focus-visible {
  outline: 3px solid rgba(255,255,255,.92);
  outline-offset: 3px;
}
.game-card--arcade .game-piece:disabled {
  -webkit-appearance: none;
  appearance: none;
  color: inherit;
}
.game-card--arcade .game-piece:not(:disabled) {
  -webkit-user-drag: none;
}
.game-card--arcade .game-piece__grid, 
.game-card--arcade .game-piece__grid i, 
.game-card--arcade .board-cell {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.game-piece--ghost.is-dropping {
  transition: transform 76ms cubic-bezier(.14,.83,.23,1),opacity 70ms ease-out;
}
.game-piece--ghost.is-returning {
  transition: transform 108ms cubic-bezier(.2,.72,.28,1),opacity 100ms ease-out;
}
.game-card--arcade .game-piece.is-dragging {
  opacity: .035;
  transform: translateY(1px) scale(.96);
}
.game-card--arcade .board-cell.is-preview {
  opacity: .84;
  transform: scale(.985);
}
.game-card--arcade .board-cell.is-invalid {
  opacity: .42;
}
.game-card--arcade .arcade-exit-button:active, 
.game-card--arcade .arcade-icon-button:active {
  transform: translateY(2px) scale(.98);
}
.game-card--arcade .arcade-power-button:active .arcade-power-button__disc {
  transform: translateY(2px) scale(.97);
}
.game-dialog__actions button:disabled {
  opacity: .58;
  cursor: wait;
  filter: saturate(.65);
}
@media (max-width: 620px) {.game-card--arcade {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
.game-settings-dialog__toggles { gap: 8px; }
.settings-toggle { min-height: 45px; padding: 7px 8px; font-size: 12px; }
.settings-toggle__icon { width: 24px; height: 24px; font-size: 16px; }
.game-toolbar--arcade { position: relative; z-index: 4; }
.piece-area--arcade { position: relative; z-index: 3; }
.game-card--arcade .game-piece { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {.settings-toggle, 
  .settings-action, 
  .game-piece--ghost.is-dropping, 
  .game-piece--ghost.is-returning { transition: none!important; }
}
.arcade-icon-button#bbo-sound { position: relative; }
.arcade-icon-button#bbo-sound.is-muted::after {
  content: "";
  position: absolute;
  width: 58%;
  height: 3px;
  border-radius: 2px;
  background: #ff5d70;
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
  transform: rotate(-45deg);
  pointer-events: none;
}
.game-settings-dialog.no-fullscreen .settings-action--gold { grid-column: 1 / -1; }
.game-card--arcade .board-cell {
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: default;
}
.game-card--arcade .board-cell:focus-visible {
  z-index: 5;
  outline: 2px solid #fff;
  outline-offset: -3px;
}
@media (max-width: 620px) {.arcade-icon-button { width: 40px; height: 40px; }
.arcade-exit-button { min-height: 39px; }
.arcade-mode .game-mode-button { min-height: 30px; }
}
@media (max-width: 620px) and (max-height: 760px) {.arcade-icon-button { width: 36px; height: 36px; }
.arcade-exit-button { min-height: 35px; }
.arcade-mode .game-mode-button { min-height: 28px; }
}
:root {
  --bbo-piece-slot-pad-x: 6;
  --bbo-piece-slot-pad-y: 6;
  --bbo-piece-inner-gap: 3;
}
.game-card--arcade .game-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.game-card--arcade .game-piece__grid {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin-inline: auto;
  justify-self: center;
  align-self: center;
}
.game-card--arcade .game-piece--ghost {
  overflow: visible;
}
.game-piece--ghost .game-piece__grid {
  margin: 0;
}
@media (max-width: 620px) {:root {
    --bbo-piece-slot-pad-x: 4;
    --bbo-piece-slot-pad-y: 4;
    --bbo-piece-inner-gap: 2.5;
  }
}
.game-card--arcade .piece-tray {
  align-items: center;
}
.game-card--arcade .game-piece {
  height: 104px;
  min-height: 104px;
  max-height: 104px;
  padding: 4px;
  contain: layout paint;
}
.game-card--arcade .game-piece__grid {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
}
.game-card--arcade .game-piece__grid i {
  min-width: 0;
  min-height: 0;
}
@media (max-width: 620px) {:root { --bbo-piece-slot-pad-x: 3; --bbo-piece-slot-pad-y: 3; --bbo-piece-inner-gap: 2; }
.piece-area--arcade { min-height: 93px; }
.game-card--arcade .piece-tray { min-height: 86px; height: 86px; }
.game-card--arcade .game-piece { height: 82px; min-height: 82px; max-height: 82px; padding: 2px; }
}
@media (max-width: 390px) {.piece-area--arcade { min-height: 88px; }
.game-card--arcade .piece-tray { min-height: 82px; height: 82px; }
.game-card--arcade .game-piece { height: 78px; min-height: 78px; max-height: 78px; }
}
.game-card--arcade .game-piece {
  transition: opacity 110ms ease, background-color 110ms ease, border-color 110ms ease, transform 110ms cubic-bezier(.2,.75,.3,1);
}
.game-piece--ghost.is-dropping {
  transition: transform 62ms cubic-bezier(.14,.86,.22,1), opacity 58ms ease-out;
}
.game-piece--ghost.is-returning {
  transition: transform 94ms cubic-bezier(.2,.76,.28,1), opacity 88ms ease-out;
}
.game-card--arcade .board-cell.is-clearing {
  animation-duration: 330ms;
}
.piece-tray.is-refilling .game-piece {
  animation-duration: 360ms;
  animation-delay: calc(var(--piece-index,0) * 52ms);
}
.game-card--arcade .game-piece.is-selected {
  transform: translateY(-2px) scale(1.015);
}
.game-card--arcade .game-piece.is-dragging {
  opacity: .02;
  transform: translateY(1px) scale(.98);
}
.game-card--arcade .board-cell.is-preview {
  opacity: .88;
  transform: scale(.99);
}
.game-card--arcade .board-cell.is-invalid {
  opacity: .38;
}
@media (hover:none) and (pointer:coarse) {.game-card--arcade .game-piece:active:not(:disabled) { transform: scale(.985); }
.arcade-power-button:hover .arcade-power-button__disc, 
  .arcade-icon-button:hover, 
  .arcade-exit-button:hover { filter: none; }
}
@media (prefers-reduced-motion: reduce) {.game-card--arcade .game-piece, 
  .game-card--arcade .board-cell, 
  .piece-tray.is-refilling .game-piece { animation: none!important; transition: none!important; }
}
.game-lifetime-stats {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin: 12px 0 14px;
}
.game-lifetime-stats > div {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid #dbe7f7;
  border-radius: 12px;
  background: #f5f9ff;
  text-align: center;
}
.game-lifetime-stats span {
  display: block;
  margin-bottom: 2px;
  color: #607ba2;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.game-lifetime-stats strong {
  display: block;
  overflow: hidden;
  color: #14396f;
  font-size: 18px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
}
.game-achievements {
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid #dbe7f7;
  border-radius: 14px;
  background: #f9fbff;
}
.game-achievements__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: #17396e;
  font-size: 12px;
}
.game-achievements__head > span {
  padding: 3px 7px;
  border-radius: 999px;
  background: #e9f2ff;
  color: #37679f;
  font-size: 10px;
  font-weight: 850;
}
.game-achievements__list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}
.game-achievement {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e0e7f1;
  border-radius: 11px;
  background: #f2f4f8;
  opacity: .58;
  filter: grayscale(.55);
}
.game-achievement.is-unlocked {
  border-color: #b7d6ff;
  background: linear-gradient(180deg,#f3f9ff,#eaf4ff);
  opacity: 1;
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.game-achievement__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #dde4ee;
  color: #718096;
  font-size: 12px;
  font-weight: 950;
}
.game-achievement.is-unlocked .game-achievement__icon {
  background: linear-gradient(180deg,#6fc8ff,#2581e7);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,52,130,.35);
}
.game-achievement__copy { min-width: 0; display: grid; gap: 1px; }
.game-achievement__copy strong { overflow: hidden; color: #1a355f; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.game-achievement__copy small { overflow: hidden; color: #7285a2; font-size: 9px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.game-dialog__unlocks {
  margin: 12px 0 2px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 12px;
  background: rgba(255,185,30,.17);
  color: #fff6d3;
  text-align: left;
}
.game-dialog__unlocks[hidden] { display: none; }
.game-dialog__unlocks > strong { display: block; margin-bottom: 6px; font-size: 12px; }
.game-dialog__unlock-list { display: flex; flex-wrap: wrap; gap: 5px; }
.game-dialog__unlock-list span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 10px;
  font-weight: 850;
}
@media (max-width:620px) {.game-lifetime-stats { gap: 5px; margin: 9px 0 10px; }
.game-lifetime-stats > div { padding: 8px 4px; border-radius: 10px; }
.game-lifetime-stats strong { font-size: 15px; }
.game-achievements { padding: 9px; border-radius: 12px; }
.game-achievements__list { grid-template-columns: 1fr; gap: 5px; }
.game-achievement { padding: 7px; }
.game-achievement__copy small { display: none; }
.game-achievement__icon { width: 30px; height: 30px; }
}
body {
  background:
    radial-gradient(circle at 8% 0%, rgba(65,190,255,.18), transparent 32rem),
    radial-gradient(circle at 96% 12%, rgba(125,67,231,.10), transparent 28rem),
    var(--bg);
  color: var(--text);
}
h1, h2, h3 { color: var(--text); }
::selection { background: rgba(22,143,231,.22); color: var(--navy); }
.site-header {
  background: linear-gradient(180deg,rgba(18,42,96,.98),rgba(12,31,74,.98));
  border-bottom: 1px solid rgba(119,194,255,.22);
  box-shadow: 0 7px 24px rgba(5,29,72,.15);
  backdrop-filter: blur(16px);
}
.site-header__inner { min-height: 70px; }
.brand__link { color: #fff; font-size: 21px; text-shadow: 0 1px 0 rgba(0,0,0,.12); }
.brand__mark {
  padding: 6px;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 5px 13px rgba(1,18,55,.24);
}
.brand__mark i { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -2px 0 rgba(0,0,0,.12); }
.brand__mark i:nth-child(1) { background: linear-gradient(180deg,#61d2ff,#1598ef); }
.brand__mark i:nth-child(2) { background: linear-gradient(180deg,#69f276,#20cc3d); }
.brand__mark i:nth-child(3) { background: linear-gradient(180deg,#fff26c,#ffc51c); }
.brand__mark i:nth-child(4) { background: linear-gradient(180deg,#cb73ff,#8f3be2); }
.custom-logo { max-height: 44px; }
.site-nav__list { gap: 8px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 7px 12px;
  border-radius: 12px;
  color: #dcecff;
  font-size: 14px;
  transition: background .14s ease,color .14s ease,transform .14s ease;
}
.site-nav a:hover, .site-nav a:focus { background: rgba(255,255,255,.09); color: #fff; transform: translateY(-1px); }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a { background: linear-gradient(180deg,#24d84b,#0fb332); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 3px 0 #087a22; }
.nav-toggle { color: #fff; border-radius: 12px; background: rgba(255,255,255,.07); }
.nav-toggle__bars i { background: #fff; }
.skip-link { background: #fff; color: var(--navy); }
.button {
  border-radius: 14px;
  transition: transform .12s ease,filter .12s ease,box-shadow .12s ease;
}
.button:hover { transform: translateY(-1px); }
.button--primary {
  border-color: #0b9828;
  background: linear-gradient(180deg,#25df4b,#0fb832);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,82,22,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 4px 0 #087c22,0 8px 18px rgba(11,133,43,.15);
}
.button--primary:hover { background: linear-gradient(180deg,#2ce653,#12c238); filter: brightness(1.01); }
.button--secondary {
  border-color: #c7ddf6;
  background: linear-gradient(180deg,#fff,#f0f7ff);
  color: #174a82;
  box-shadow: 0 4px 12px rgba(37,92,158,.08);
}
.button--secondary:hover { border-color: #8bbce8; background: #fff; }
.button--text, .text-link { color: #117bcf; }
.text-link:hover { color: #0d5da2; }
.eyebrow { color: #147fd1; }
.home-main { background: transparent; }
.home-section { position: relative; padding: 68px 0; }
.home-section--tight { padding: 26px 0 12px; }
.home-section--alt {
  border: 0;
  background: linear-gradient(180deg,rgba(255,255,255,.66),rgba(239,247,255,.82));
}
.section-heading h2 { color: #102d61; }
.feature-strip {
  border: 1px solid #1b4a8c;
  background: linear-gradient(145deg,#183b7c,#10285d);
  box-shadow: 0 14px 32px rgba(14,52,111,.16),inset 0 1px 0 rgba(255,255,255,.12);
}
.feature-strip > div { border-color: rgba(255,255,255,.11); }
.feature-strip strong { color: #fff; }
.feature-strip span { color: #bcd8f7; }
.steps-card {
  border-color: #cfe2f8;
  background: linear-gradient(180deg,#fff,#f8fbff);
  box-shadow: 0 14px 34px rgba(35,89,154,.08);
}
.steps-card li { border-color: #dfebf8; }
.steps-card li > span {
  border: 1px solid rgba(255,255,255,.32);
  background: linear-gradient(180deg,#55c9ff,#168fe7);
  color: #fff;
  box-shadow: 0 3px 0 #0f6fb8;
}
.steps-card li:nth-child(2) > span { background: linear-gradient(180deg,#6df379,#1dcb3c); box-shadow: 0 3px 0 #0b8f28; }
.steps-card li:nth-child(3) > span { background: linear-gradient(180deg,#cb72ff,#8a39df); box-shadow: 0 3px 0 #6023ad; }
.tip-card {
  position: relative;
  overflow: hidden;
  border-color: #d4e5f8;
  background: linear-gradient(180deg,#fff,#f7fbff);
  box-shadow: 0 12px 28px rgba(29,85,151,.08);
}
.tip-card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,#2fb8ff,#168fe7); }
.tip-card:nth-child(2)::before { background:linear-gradient(90deg,#62ed74,#17c73b); }
.tip-card:nth-child(3)::before { background:linear-gradient(90deg,#ffc72b,#f49b00); }
.tip-card__number {
  min-width: 34px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 20px;
  padding: 3px 8px;
  border-radius: 9px;
  background: #e8f5ff;
  color: #1178c7;
}
.tip-card p, .section-copy p:not(.eyebrow) { color: var(--muted); }
.solver-banner {
  position: relative;
  overflow: hidden;
  border: 1px solid #2377d8;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.24) 0 2px,transparent 3px),
    radial-gradient(circle at 85% 30%,rgba(138,240,255,.26) 0 2px,transparent 3px),
    linear-gradient(145deg,#1c9df1 0,#237ae6 48%,#6947df 100%);
  box-shadow: 0 20px 48px rgba(33,101,194,.23),inset 0 1px 0 rgba(255,255,255,.27);
}
.solver-banner::after { content:""; position:absolute; right:-90px; bottom:-120px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(130,223,255,.28),transparent 68%); pointer-events:none; }
.solver-banner .eyebrow { color: #d9f3ff; }
.solver-banner h2 { color: #fff; }
.solver-banner p:not(.eyebrow) { color: #e0efff; }
.guide-link-card {
  border-color: #d2e5f8;
  background: linear-gradient(180deg,#fff,#f5faff);
  box-shadow: 0 10px 24px rgba(28,84,151,.07);
}
.guide-link-card:hover { border-color:#86bcea; box-shadow:0 16px 32px rgba(27,86,154,.12); }
.guide-link-card > span { background:linear-gradient(180deg,#50c8ff,#178fe5); color:#fff; box-shadow:0 3px 0 #0f6fb9; }
.guide-link-card:nth-child(2) > span { background:linear-gradient(180deg,#68ef76,#1dcc3d); box-shadow:0 3px 0 #0a9228; }
.guide-link-card:nth-child(3) > span { background:linear-gradient(180deg,#ca72ff,#8c3be0); box-shadow:0 3px 0 #6024ac; }
.faq-wrap details {
  border-color:#d4e6f8;
  background:linear-gradient(180deg,#fff,#f8fbff);
  box-shadow:0 7px 20px rgba(35,90,157,.05);
}
.faq-wrap summary { color:#15376b; }
.faq-wrap summary::after {
  width:28px; height:28px; display:grid; place-items:center; top:14px;
  border-radius:9px; background:#e9f5ff; color:#137ac8;
}
.archive-header .eyebrow { color:#7edcff; }
.post-card {
  border-color:#d2e3f6;
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 30px rgba(26,80,145,.08);
}
.post-card:hover { transform:translateY(-4px); border-color:#8abbea; box-shadow:0 18px 38px rgba(27,84,151,.14); }
.post-card__media { background:linear-gradient(145deg,#dff3ff,#dfe6ff); }
.post-card__body { padding:21px; }
.post-card__body h2, .post-card__body h3 { color:#15366a; }
.post-card__body h2 a:hover, .post-card__body h3 a:hover { color:#1178c9; }
.post-card__meta {
  width:max-content;
  margin-bottom:9px;
  padding:3px 8px;
  border-radius:999px;
  background:#eaf5ff;
  color:#3071ad!important;
  font-size:11px;
}
.post-card__body p { color:#657a9c; }
.pagination .page-numbers.current { border-color:#116fb9; background:linear-gradient(180deg,#2bb4fa,#168fe7); box-shadow:0 3px 0 #0d6bb4; }
.guide-hero .eyebrow { color:#77d9ff; }
.guide-hero .button--secondary { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.10); color:#fff; box-shadow:none; }
.guide-cta .eyebrow { color:#d9f3ff; }
.guide-cta .button--secondary { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.10); color:#fff; }
.article {
  border-color:#d2e4f6;
  border-radius:26px;
  box-shadow:0 18px 44px rgba(28,80,145,.10);
}
.article__header .eyebrow{ color:#78d9ff; }
.solver-hero .eyebrow { color:#7ddcff; }
.solver-piece-slot.is-active { border-color:#168fe7; background:#edf7ff; box-shadow:0 0 0 3px rgba(22,143,231,.10); }
.solver-shape-option.is-selected { border-color:#168fe7; background:#e9f6ff; }
.solver-shape-grid i.is-filled { background:linear-gradient(180deg,#57c9ff,#1398ef 52%,#0876c8); }
.site-footer {
  position:relative;
  overflow:hidden;
  padding-top:54px;
  background:
    radial-gradient(circle at 10% 8%,rgba(40,168,255,.14),transparent 24rem),
    linear-gradient(160deg,#10265a,#091a40 70%);
  color:#fff;
}
.site-footer::after { content:""; position:absolute; right:-110px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(116,75,232,.17),transparent 68%); pointer-events:none; }
.footer-brand { display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:22px; }
.footer-brand__mark { display:grid; grid-template-columns:repeat(2,8px); gap:3px; padding:6px; border-radius:9px; background:rgba(255,255,255,.08); }
.footer-brand__mark i { width:8px; height:8px; border-radius:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.footer-brand__mark i:nth-child(1){background:#25baff}
.footer-brand__mark i:nth-child(2){background:#24d848}
.footer-brand__mark i:nth-child(3){background:#ffc51c}
.footer-brand__mark i:nth-child(4){background:#a94ff0}
.site-footer p { color:#adc6e5; }
.footer-nav { gap:10px 18px; flex-wrap:wrap; }
.footer-nav a { color:#cce0f7; }
.footer-nav a:hover { color:#fff; }
.site-footer__bottom { border-color:rgba(177,211,245,.14); color:#7896bb; }
.site-footer__legal a { color:#b7d2ef; }
@media (max-width: 760px) {.site-header { background:linear-gradient(180deg,#112a60,#0c214f); }
.site-nav { border-color:#284d86!important; background:#10265a!important; box-shadow:0 18px 38px rgba(3,22,58,.28); }
.site-nav__list { gap:0; }
.site-nav a { min-height:46px; border-radius:0; color:#d9ebff!important; }
.site-nav a:hover, .site-nav a:focus { background:rgba(255,255,255,.07); color:#fff!important; transform:none; }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a { margin:5px; border-radius:10px; background:linear-gradient(180deg,#25dc4a,#10b933); }
.home-section { padding:50px 0; }
.section-heading { gap:12px; align-items:flex-start; }
.section-heading__link { margin-top:4px; }
.solver-banner { padding:24px 20px; }
.article { padding:16px; border-radius:22px; }
}
@media (max-width: 540px) {.shell { width:min(calc(100% - 24px),var(--shell)); }
.feature-strip > div { padding:15px 13px; justify-content:center; flex-wrap:wrap; text-align:center; }
.feature-strip strong { font-size:19px; }
.feature-strip span { font-size:12px; }
.tip-card { padding:20px 18px; }
.guide-link-card { padding:17px; }
.post-card__body { padding:18px; }
.site-footer { padding-top:44px; }
}
.game-settings-dialog.no-haptics .game-settings-dialog__toggles { grid-template-columns: 1fr; }
.game-settings-dialog.no-haptics #bbo-settings-sound { width: 100%; }
.game-settings-dialog.no-haptics #bbo-settings-haptics { display: none !important; }
html.bbo-focus-fullscreen-open, 
body.bbo-focus-fullscreen-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}
.bbo-focus-fullscreen-open .game-settings-dialog, 
.bbo-focus-fullscreen-open .game-dialog {
  z-index: 2147483640 !important;
}
#bbo-game.is-focus-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: max(10px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background:
    radial-gradient(circle at 10% 18%,rgba(255,255,255,.65) 0 2px,transparent 3px),
    radial-gradient(circle at 88% 14%,rgba(183,240,255,.65) 0 2px,transparent 3px),
    linear-gradient(160deg,#37b9fb 0%,#188fe9 38%,#2576e9 72%,#176ad7 100%) !important;
}
#bbo-game.is-focus-fullscreen .arcade-topbar, 
#bbo-game.is-focus-fullscreen .arcade-hud {
  width: min(100%,760px);
  margin-inline: auto;
}
#bbo-game.is-focus-fullscreen .board-wrap--arcade {
  width: min(72vh,660px);
  width: min(72dvh,660px);
  max-width: 100%;
}
#bbo-game.is-focus-fullscreen .piece-area--arcade, 
#bbo-game.is-focus-fullscreen .game-toolbar--arcade, 
#bbo-game.is-focus-fullscreen .challenge-target {
  width: min(100%,660px);
  margin-inline: auto;
}
#bbo-game.is-focus-fullscreen .game-status { width: min(100%,660px); margin-inline:auto; }
@media (max-width:620px) {.bbo-focus-fullscreen-open .game-settings-dialog, 
.bbo-focus-fullscreen-open .game-dialog {
  z-index: 2147483640 !important;
}
#bbo-game.is-focus-fullscreen {
    padding-top: max(7px,env(safe-area-inset-top)) !important;
    padding-bottom: max(7px,env(safe-area-inset-bottom)) !important;
  }
#bbo-game.is-focus-fullscreen .arcade-topbar { min-height: 40px; }
#bbo-game.is-focus-fullscreen .arcade-hud { margin-bottom: 2px; }
#bbo-game.is-focus-fullscreen .board-wrap--arcade {
    width: min(92vw,calc(100dvh - 300px),620px);
    min-width: min(82vw,330px);
  }
#bbo-game.is-focus-fullscreen .piece-area--arcade { min-height: 88px; padding-top: 4px; }
#bbo-game.is-focus-fullscreen .game-toolbar--arcade { margin-top: 0; }
}
.game-toolbar--arcade.game-toolbar--primary {
  grid-template-columns: repeat(3,minmax(0,1fr));
  width: min(100%,470px);
  gap: 12px;
}
.game-toolbar--primary .arcade-power-button {
  min-height: 82px;
  justify-content: center;
}
.game-toolbar--primary .arcade-power-button__label {
  min-width: 68px;
  min-height: 24px;
  padding-inline: 9px;
  font-size: 10px;
}
.game-settings-dialog__actions--utility {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.game-settings-dialog__actions--utility .settings-action {
  min-height: 50px;
  padding: 10px 12px;
  font-size: 15px;
}
.settings-action--fullscreen, 
.settings-action--restart, 
.settings-action--continue {
  grid-column: 1 / -1;
}
.settings-action--neutral {
  background: linear-gradient(180deg,#7187c5,#4c64a9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 4px 0 #354a88;
}
.settings-action--restart {
  border-color: rgba(255,255,255,.32);
  background: linear-gradient(180deg,#ff9e35,#e56a17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 4px 0 #a84311;
}
.settings-action--restart.is-confirming {
  background: linear-gradient(180deg,#ff664f,#d9372f)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32),0 4px 0 #8f211d!important;
}
.game-settings-dialog__panel {
  width: min(100%,420px);
}
.game-settings-dialog__toggles {
  margin-bottom: 11px;
}
.nav-toggle, 
.site-nav a, 
.button:not(.button--small), 
.settings-action, 
.settings-toggle {
  min-height: 44px;
}
.button:disabled, 
.settings-action:disabled, 
.settings-toggle:disabled {
  pointer-events: none;
}
@media (max-width:620px) {.game-toolbar--arcade.game-toolbar--primary {
    width: min(100%,330px);
    gap: 10px;
  }
.game-toolbar--primary .arcade-power-button { min-height: 72px; }
.game-toolbar--primary .arcade-power-button__disc {
    width: 48px;
    height: 48px;
  }
.game-toolbar--primary .arcade-power-button__label {
    min-width: 64px;
    min-height: 21px;
    font-size: 8.5px;
  }
.game-settings-dialog__panel { padding: 20px 15px 16px; }
.game-settings-dialog__panel h2 { margin-bottom: 12px; font-size: 30px; }
.game-settings-dialog__actions--utility { gap: 8px; }
.game-settings-dialog__actions--utility .settings-action {
    min-height: 47px;
    padding: 8px 9px;
    font-size: 13px;
  }
}
@media (max-width:360px) {.game-toolbar--arcade.game-toolbar--primary { width: min(100%,300px); gap: 6px; }
.game-toolbar--primary .arcade-power-button__label { min-width: 58px; }
}
.settings-volume {
  margin: -2px 0 14px;
  padding: 11px 12px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 13px;
  background: rgba(19,39,98,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: opacity .14s ease, filter .14s ease;
}
.settings-volume.is-disabled {
  opacity: .48;
  filter: saturate(.65);
}
.settings-volume__head, 
.settings-volume__scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.settings-volume__head {
  margin-bottom: 7px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}
.settings-volume__head strong {
  min-width: 38px;
  color: #bfefff;
  text-align: right;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.settings-volume__range {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: #57d77c;
  cursor: pointer;
  touch-action: pan-x;
}
.settings-volume__range:disabled { cursor: not-allowed; }
.settings-volume__range:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 2px;
  border-radius: 10px;
}
.settings-volume__scale {
  margin-top: -2px;
  color: rgba(226,237,255,.72);
  font-size: 10px;
  font-weight: 750;
}
@media (max-width:620px) {.settings-volume { padding: 9px 10px 8px; margin-bottom: 11px; }
.settings-volume__range { height: 32px; }
}
.board-fx-layer {
  position: absolute;
  inset: 7px;
  z-index: 6;
  overflow: hidden;
  border-radius: 12px;
  pointer-events: none;
  contain: layout paint;
}
.board-fx-ring, 
.board-fx-spark, 
.board-fx-particle, 
.board-fx-clear-wave {
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}
.board-fx-ring {
  border: 2px solid var(--fx-color,#6bd8ff);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.35);
  box-shadow: 0 0 16px color-mix(in srgb,var(--fx-color,#6bd8ff) 55%,transparent);
  animation: bbo-place-ring 580ms cubic-bezier(.15,.76,.24,1) both;
}
.board-fx-spark {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle,#fff 0 24%,var(--fx-color,#fff) 28% 66%,transparent 70%);
  box-shadow: 0 0 9px color-mix(in srgb,var(--fx-color,#fff) 78%,transparent);
  opacity: 0;
  animation: bbo-place-spark 680ms cubic-bezier(.12,.72,.26,1) var(--fx-delay,0ms) both;
}
.board-fx-particle {
  width: var(--fx-size,6px);
  height: var(--fx-size,6px);
  margin: calc(var(--fx-size,6px) / -2) 0 0 calc(var(--fx-size,6px) / -2);
  border-radius: 1.5px;
  background: linear-gradient(145deg,#fff 0 16%,var(--fx-color,#6bd8ff) 20% 100%);
  box-shadow: 0 0 8px color-mix(in srgb,var(--fx-color,#6bd8ff) 70%,transparent);
  opacity: 0;
  animation: bbo-clear-particle 820ms cubic-bezier(.12,.68,.22,1) var(--fx-delay,0ms) both;
}
.board-fx-clear-wave {
  inset: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.34),rgba(136,226,255,.13) 42%,transparent 72%);
  opacity: 0;
  transform: scale(.82);
  animation: bbo-clear-wave 580ms cubic-bezier(.16,.72,.22,1) both;
}
.board-fx-clear-wave.is-strong {
  background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.5),rgba(103,213,255,.2) 46%,transparent 76%);
}
.board-wrap--arcade.is-clear-flash {
  animation: bbo-board-clear-frame 440ms cubic-bezier(.18,.75,.24,1);
}
.board-wrap--arcade.is-multi-clear {
  box-shadow: 0 5px 0 #0c1c45,0 13px 25px rgba(6,34,89,.28),0 0 24px rgba(130,225,255,.45),inset 0 1px 0 rgba(255,255,255,.22);
}
.game-card--arcade .piece-tray {
  position: relative;
  overflow: hidden;
}
.game-card--arcade .piece-tray::after {
  content: "";
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: -34%;
  width: 24%;
  border-radius: 50%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transform: skewX(-18deg);
}
.game-card--arcade .piece-tray.is-deal-glow::after {
  animation: bbo-tray-shine 560ms ease-out both;
}
.score-box.is-best-celebrating {
  animation: bbo-best-celebrate 850ms cubic-bezier(.15,.78,.24,1) both;
}
.score-box.is-best-celebrating::after {
  content: "";
  position: absolute;
  inset: -45%;
  background: linear-gradient(110deg,transparent 36%,rgba(255,255,255,.62) 49%,transparent 62%);
  transform: translateX(-75%) rotate(4deg);
  pointer-events: none;
  animation: bbo-best-shine 780ms ease-out both;
}
.board-wrap--arcade.is-game-over-fx .game-board {
  animation: bbo-board-game-over 360ms ease-out both;
}
.board-wrap--arcade.is-game-over-fx::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 7;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 42%,transparent 35%,rgba(5,18,51,.32) 100%);
  pointer-events: none;
  animation: bbo-game-over-vignette 380ms ease-out both;
}
@keyframes bbo-place-ring {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.32); }

  16% { opacity: .82; transform: translate(-50%,-50%) scale(.62); }

  52% { opacity: .55; }

  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.82); }

}
@keyframes bbo-place-spark {
  0% { opacity: 0; transform: translate3d(0,2px,0) scale(.35); }

  16% { opacity: 1; transform: translate3d(0,0,0) scale(1); }

  58% { opacity: .72; }

  100% { opacity: 0; transform: translate3d(var(--fx-x,0),var(--fx-y,-20px),0) scale(.16); }

}
@keyframes bbo-clear-particle {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.52) rotate(0); }

  12% { opacity: 1; transform: translate3d(0,0,0) scale(1.02) rotate(0); }

  58% { opacity: .9; }

  100% { opacity: 0; transform: translate3d(var(--fx-x,0),var(--fx-y,-28px),0) scale(.22) rotate(var(--fx-rot,90deg)); }

}
@keyframes bbo-clear-wave {
  0% { opacity: 0; transform: scale(.80); filter: blur(2px); }

  22% { opacity: .88; transform: scale(.94); filter: blur(0); }

  52% { opacity: .55; }

  100% { opacity: 0; transform: scale(1.12); filter: blur(.4px); }

}
@keyframes bbo-board-clear-frame {
  0%,100% { filter: brightness(1); transform: translateZ(0) scale(1); }

  42% { filter: brightness(1.08); transform: translateZ(0) scale(1.004); }

}
@keyframes bbo-tray-shine {
  0% { left:-34%; opacity:0; }

  18% { opacity:.8; }

  100% { left:112%; opacity:0; }

}
@keyframes bbo-best-celebrate {
  0%,100% { filter:brightness(1); }

  40% { filter:brightness(1.18); }

}
@keyframes bbo-best-shine {
  from { transform:translateX(-75%) rotate(4deg); opacity:0; }

  18% { opacity:1; }

  to { transform:translateX(75%) rotate(4deg); opacity:0; }

}
@keyframes bbo-board-game-over {
  0% { filter:brightness(1) saturate(1); transform:scale(1); }

  38% { filter:brightness(.88) saturate(.8); transform:scale(.995); }

  100% { filter:brightness(.92) saturate(.84); transform:scale(1); }

}
@keyframes bbo-game-over-vignette {
  from { opacity:0; }

  to { opacity:1; }

}
@media (max-width:620px) {.board-fx-layer { inset: 5px; border-radius: 10px; }
.board-fx-particle { --fx-size:5px; }
.board-fx-spark { width:4px; height:4px; margin:-2px 0 0 -2px; }
.board-wrap--arcade.is-game-over-fx::after { inset:5px; border-radius:10px; }
}
@media (prefers-reduced-motion: reduce) {.board-fx-layer { display:none!important; }
.board-wrap--arcade.is-clear-flash, 
  .board-wrap--arcade.is-game-over-fx .game-board, 
  .score-box.is-best-celebrating, 
  .score-box.is-best-celebrating::after, 
  .game-card--arcade .piece-tray.is-deal-glow::after { animation:none!important; }
.board-wrap--arcade.is-game-over-fx::after { animation:none!important; opacity:.65; }
}
.game-card--arcade {
  --combo-strength: 0;
  transition: box-shadow 180ms ease, background-color 180ms ease;
}
.game-card--arcade.is-placement-impact {
  animation: bbo-card-placement-impact 260ms cubic-bezier(.18,.78,.25,1);
}
.game-card--arcade.is-clear-impact {
  animation: bbo-card-clear-impact 500ms cubic-bezier(.16,.76,.24,1);
}
.game-card--arcade.is-combo-mood {
  box-shadow:
    0 26px 70px rgba(23,84,171,.24),
    0 0 calc(18px + 26px * var(--combo-strength)) rgba(160,104,255,calc(.16 + .18 * var(--combo-strength))),
    inset 0 1px 0 rgba(255,255,255,.42);
}
.board-wrap--arcade {
  background: linear-gradient(180deg,#203979 0%,#102352 58%,#0b1c45 100%);
  box-shadow:
    0 6px 0 #09193e,
    0 15px 30px rgba(6,25,66,.34),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 0 rgba(0,0,0,.16);
}
.game-card--arcade .game-board {
  background: linear-gradient(180deg,#12234f,#0d1c43);
  box-shadow: inset 0 3px 8px rgba(4,15,40,.34), inset 0 0 0 1px rgba(255,255,255,.035);
}
.game-card--arcade .board-cell {
  border-color: rgba(5,18,49,.68);
  background:
    radial-gradient(circle at 44% 28%,rgba(255,255,255,.035),transparent 43%),
    linear-gradient(180deg,#273a68 0%,#21335e 48%,#1b2c55 100%);
  box-shadow:
    inset 0 2px 3px rgba(6,18,47,.32),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 1px 0 rgba(255,255,255,.025);
}
.game-card--arcade .board-cell.is-filled, 
.game-card--arcade .game-piece__grid i.is-filled, 
.game-piece--ghost .game-piece__grid i.is-filled {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb,var(--tile-dark,#0876c8) 72%,#071d48 28%);
  background:
    linear-gradient(145deg,rgba(255,255,255,.50) 0 8%,rgba(255,255,255,.13) 9% 18%,transparent 19% 80%,rgba(0,0,0,.18) 81% 100%),
    linear-gradient(180deg,var(--tile-light) 0%,var(--tile-main) 43%,var(--tile-main) 62%,var(--tile-dark) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 2px 0 0 rgba(255,255,255,.08),
    inset 0 -4px 0 rgba(0,0,0,.16),
    inset -2px 0 0 rgba(0,0,0,.06),
    0 2px 3px rgba(3,20,55,.28);
}
.game-card--arcade .board-cell.is-filled::before, 
.game-card--arcade .game-piece__grid i.is-filled::before, 
.game-piece--ghost .game-piece__grid i.is-filled::before {
  content:"";
  position:absolute;
  left:12%; right:12%; top:8%; height:22%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0));
  pointer-events:none;
}
.game-card--arcade .board-cell.is-filled::after, 
.game-card--arcade .game-piece__grid i.is-filled::after, 
.game-piece--ghost .game-piece__grid i.is-filled::after {
  content:"";
  position:absolute;
  inset:auto 10% 6% 10%;
  height:14%;
  border-radius:999px;
  background:rgba(0,0,0,.09);
  filter:blur(.5px);
  pointer-events:none;
}
.game-card--arcade .board-cell.is-preview {
  transform:scale(.965);
  opacity:.88;
  outline:1px solid rgba(255,255,255,.2);
  outline-offset:-2px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.34),inset 0 -3px 0 rgba(0,0,0,.12),0 0 9px color-mix(in srgb,var(--tile-main,#58baff) 36%,transparent);
}
.game-card--arcade .board-cell.is-invalid {
  opacity:.66;
  outline:2px solid rgba(255,121,117,.72);
  outline-offset:-2px;
  background:linear-gradient(180deg,#ff918d,#e43d39);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(91,7,5,.18),0 0 9px rgba(255,79,73,.22);
}
.game-card--arcade .piece-tray {
  gap:8px;
  overflow:visible;
  isolation:isolate;
}
.game-card--arcade .game-piece {
  position:relative;
  isolation:isolate;
  min-width:0;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(6,45,115,.10),rgba(5,32,88,.22));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),inset 0 -8px 18px rgba(4,26,70,.10);
  transition:transform 110ms cubic-bezier(.2,.75,.3,1),background 110ms ease,border-color 110ms ease,box-shadow 110ms ease,opacity 110ms ease;
}
.game-card--arcade .game-piece::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:13%; right:13%; bottom:12%; height:17%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(6,29,75,.34),rgba(6,29,75,0) 72%);
  filter:blur(2px);
  pointer-events:none;
}
.game-card--arcade .game-piece:hover {
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(7,42,106,.20));
  border-color:rgba(255,255,255,.17);
}
.game-card--arcade .game-piece.is-selected {
  transform:translateY(-3px) scale(1.012);
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(7,42,106,.22));
  border-color:rgba(201,244,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 7px 16px rgba(4,35,90,.16);
}
.game-card--arcade .game-piece__grid {
  filter:drop-shadow(0 6px 5px rgba(4,30,79,.30));
  transition:opacity 90ms ease,filter 90ms ease,transform 90ms ease;
}
.game-card--arcade .game-piece.is-drag-origin, 
.game-card--arcade .game-piece.is-dragging {
  opacity:1;
  transform:none;
  background:linear-gradient(180deg,rgba(6,45,115,.08),rgba(5,32,88,.18));
  border-color:rgba(255,255,255,.07);
}
.game-card--arcade .game-piece.is-drag-origin .game-piece__grid, 
.game-card--arcade .game-piece.is-dragging .game-piece__grid {
  opacity:.15;
  filter:grayscale(.2) brightness(.9) drop-shadow(0 2px 2px rgba(4,30,79,.18));
  transform:scale(.985);
}
.game-card--arcade .game-piece--empty {
  pointer-events:none;
  opacity:.52;
  border-style:dashed;
  border-color:rgba(203,239,255,.10);
  background:linear-gradient(180deg,rgba(6,45,115,.055),rgba(5,32,88,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -8px 18px rgba(4,26,70,.08);
}
.game-card--arcade .game-piece--empty::before {
  left:24%; right:24%; bottom:18%; height:13%; opacity:.5;
}
.game-card--arcade .game-piece.is-blocked {
  opacity:.28;
  background:rgba(7,35,89,.13);
}
.board-score-pop {
  position:absolute;
  z-index:12;
  display:grid;
  justify-items:center;
  gap:2px;
  transform:translate(-50%,-50%);
  color:#fff;
  text-align:center;
  text-shadow:0 2px 4px rgba(3,23,62,.55),0 0 10px rgba(78,193,255,.42);
  pointer-events:none;
  animation:bbo-board-score-pop 920ms cubic-bezier(.14,.76,.22,1) both;
}
.board-score-pop small {
  padding:2px 6px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(8,47,119,.64);
  color:#e9f8ff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
  line-height:1.1;
  white-space:nowrap;
}
.board-score-pop strong {
  padding:2px 7px 3px;
  border-radius:999px;
  background:rgba(5,33,87,.26);
  font-size:clamp(17px,4.2vw,28px);
  line-height:1;
  letter-spacing:-.035em;
  backdrop-filter:blur(2px);
}
.board-score-pop--place strong { font-size:clamp(15px,3.5vw,21px); opacity:.92; }
.board-score-pop--clear { animation-duration:1.18s; }
.board-score-pop--clear strong { color:#fff9cf; font-size:clamp(21px,5vw,31px); text-shadow:0 2px 4px rgba(3,23,62,.58),0 0 14px rgba(255,225,94,.34); }
.score-gain { animation-duration:920ms; }
.score-gain--clear { animation-duration:1.18s; }
@keyframes bbo-board-score-pop {
  0% { opacity:0; transform:translate(-50%,-38%) scale(.76); filter:blur(1px); }

  14% { opacity:1; transform:translate(-50%,-50%) scale(1.08); filter:blur(0); }

  30% { transform:translate(-50%,-56%) scale(1); }

  68% { opacity:1; transform:translate(-50%,-68%) scale(1); }

  100% { opacity:0; transform:translate(-50%,-96%) scale(.96); }

}
@keyframes bbo-card-placement-impact {
  0%,100% { box-shadow:0 26px 70px rgba(23,84,171,.24),inset 0 1px 0 rgba(255,255,255,.42); }

  46% { box-shadow:0 26px 70px rgba(23,84,171,.24),0 0 19px rgba(94,213,255,.20),inset 0 1px 0 rgba(255,255,255,.48); }

}
@keyframes bbo-card-clear-impact {
  0%,100% { box-shadow:0 26px 70px rgba(23,84,171,.24),inset 0 1px 0 rgba(255,255,255,.42); }

  38% { box-shadow:0 26px 70px rgba(23,84,171,.24),0 0 28px rgba(124,225,255,.32),inset 0 1px 0 rgba(255,255,255,.52); }

}
@media (max-width:620px) {.game-card--arcade .piece-tray { gap:4px; }
.game-card--arcade .game-piece { border-radius:15px; }
.board-score-pop strong { font-size:20px; }
}
@media (hover:none) and (pointer:coarse) {.game-card--arcade .game-piece:hover { background:linear-gradient(180deg,rgba(6,45,115,.10),rgba(5,32,88,.22)); border-color:rgba(255,255,255,.10); }
}
@media (prefers-reduced-motion:reduce) {.game-card--arcade.is-placement-impact, 
  .game-card--arcade.is-clear-impact, 
  .board-score-pop { animation:none!important; }
.board-score-pop { display:none!important; }
.game-card--arcade.is-combo-mood { box-shadow:0 26px 70px rgba(23,84,171,.24),inset 0 1px 0 rgba(255,255,255,.42); }
}
@media (max-width: 860px) {.arcade-mode .game-mode-copy span { display: none; }
.arcade-mode { width: min(100%,180px); }
.arcade-hud-spacer { width: min(100%,180px); }
}
.game-card--arcade .arcade-mode {
  width: 190px;
  padding: 4px;
  gap: 0;
  border-radius: 14px;
  background: rgba(8,42,112,.54);
}
.game-card--arcade .arcade-mode .game-mode-copy { display:none; }
.game-card--arcade .arcade-mode .game-mode-switch {
  min-height: 38px;
  padding: 3px;
  gap: 3px;
  border-radius: 10px;
}
.game-card--arcade .arcade-mode .game-mode-button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 11px;
  line-height: 1;
}
.game-card--arcade .arcade-hud-spacer { width:190px; }
.score-row--arcade { padding-bottom: 34px; }
.score-row--arcade .score-box--combo { will-change:opacity,transform; }
.score-row--arcade:not(.has-combo) .score-box--combo { pointer-events:none; }
.game-card--arcade .piece-area__hint[hidden] { display:none!important; }
.game-card--arcade .piece-area__hint {
  min-height:17px;
  margin:0 0 4px;
  font-weight:800;
  letter-spacing:.01em;
  opacity:.9;
}
.game-card--arcade .piece-area--arcade {
  width:min(100%,650px);
  margin-inline:auto;
}
.game-card--arcade .piece-tray {
  gap:0;
  padding:5px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(18,83,183,.18),rgba(6,44,116,.24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -12px 24px rgba(4,27,73,.08);
}
.game-card--arcade .game-piece, 
.game-card--arcade .game-piece--empty {
  border:0;
  border-radius:15px;
  background:transparent;
  box-shadow:none;
}
.game-card--arcade .game-piece + .game-piece, 
.game-card--arcade .game-piece--empty + .game-piece, 
.game-card--arcade .game-piece + .game-piece--empty, 
.game-card--arcade .game-piece--empty + .game-piece--empty {
  border-left:1px solid rgba(215,240,255,.08);
  border-radius:0 15px 15px 0;
}
.game-card--arcade .game-piece::before {
  left:18%; right:18%; bottom:10%; height:16%;
  opacity:.72;
}
.game-card--arcade .game-piece:hover {
  border-color:transparent;
  background:rgba(255,255,255,.035);
}
.game-card--arcade .game-piece.is-selected {
  transform:translateY(-3px) scale(1.012);
  border-color:transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(13,67,154,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.game-card--arcade .game-piece.is-drag-origin, 
.game-card--arcade .game-piece.is-dragging {
  background:rgba(4,31,87,.08);
}
.game-card--arcade .game-piece--empty {
  opacity:.34;
  border-style:none;
  background:rgba(5,38,99,.045);
}
.game-card--arcade .game-piece--empty::after {
  content:"";
  position:absolute;
  inset:30% 26%;
  border:1px dashed rgba(213,240,255,.09);
  border-radius:12px;
  pointer-events:none;
}
.game-dialog__panel {
  width:min(100%,430px);
  padding:24px 22px 20px;
  border-radius:28px;
}
.game-dialog__panel h2 {
  margin:0 40px 5px;
  font-size:34px;
  line-height:1.05;
}
.game-dialog__score-label {
  margin:0 0 1px!important;
  font-size:10px!important;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.game-dialog__score-wrap { margin:0 auto 7px; }
.game-dialog__score-wrap .game-dialog__score {
  margin:2px 0 4px;
  font-size:58px;
  line-height:1;
}
.game-dialog__panel #bbo-final-meta {
  min-height:18px;
  margin:2px 0 0;
  font-size:12px;
  font-weight:800;
  opacity:.92;
}
.game-dialog__stats {
  margin-top:14px;
  gap:8px;
}
.game-dialog__stats > div {
  padding:10px 5px 9px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:13px;
}
.game-dialog__stats span { font-size:9px; letter-spacing:.055em; }
.game-dialog__stats strong { margin-top:3px; font-size:20px; }
.game-dialog__actions--share {
  margin-top:16px;
  gap:8px;
}
.game-dialog__actions--share #bbo-play-again {
  min-height:52px;
  border-radius:14px;
  font-size:16px;
}
.game-dialog__actions--share #bbo-share-result, 
.game-dialog__actions--share #bbo-challenge-friend {
  min-height:44px;
  border-radius:12px;
  font-size:12px;
}
.game-dialog__actions--share [data-dialog-close] {
  min-height:34px;
  margin-top:-2px;
  background:transparent;
  box-shadow:none;
  opacity:.88;
}
.game-dialog__badge {
  bottom:-9px;
  padding:4px 9px;
  border:1px solid rgba(255,238,164,.8);
  background:linear-gradient(180deg,#fff1a7,#ffc932);
  color:#734900;
  box-shadow:0 3px 8px rgba(78,49,0,.17);
}
.game-settings-dialog__panel { border-radius:28px; }
.game-settings-dialog__actions--utility .settings-action--neutral, 
.game-settings-dialog__actions--utility .settings-action--gold { min-height:46px; }
.game-settings-dialog__actions--utility .settings-action--continue {
  min-height:54px;
  font-size:16px;
}
.game-settings-dialog__actions--utility .settings-action--restart { min-height:46px; }
@media (max-width:620px) {.game-card--arcade .arcade-mode { width:108px; padding:3px; }
.game-card--arcade .arcade-hud-spacer { width:108px; }
.game-card--arcade .arcade-mode .game-mode-switch { min-height:32px; padding:2px; gap:2px; }
.game-card--arcade .arcade-mode .game-mode-button { min-height:28px; padding:4px 2px; font-size:9px; }
.game-card--arcade .piece-tray { padding:3px; border-radius:16px; }
.game-card--arcade .game-piece { border-radius:12px; }
.game-card--arcade .game-piece + .game-piece, 
  .game-card--arcade .game-piece--empty + .game-piece, 
  .game-card--arcade .game-piece + .game-piece--empty, 
  .game-card--arcade .game-piece--empty + .game-piece--empty { border-radius:0 12px 12px 0; }
.game-dialog__panel { padding:22px 15px 15px; border-radius:24px; }
.game-dialog__panel h2 { font-size:29px; }
.game-dialog__score-wrap .game-dialog__score { font-size:49px; }
.game-dialog__stats { gap:6px; }
.game-dialog__stats > div { padding:9px 3px 8px; }
.game-dialog__stats strong { font-size:17px; }
.game-dialog__actions--share { grid-template-columns:1fr 1fr; }
.game-dialog__actions--share #bbo-play-again, 
  .game-dialog__actions--share [data-dialog-close] { grid-column:1/-1; }
}
@media (max-width:390px) {.game-card--arcade .arcade-mode, .game-card--arcade .arcade-hud-spacer { width:96px; }
.game-card--arcade .piece-tray { padding:2px; }
.game-dialog__stats span { font-size:8px; }
}
@media (hover:none) and (pointer:coarse) {.game-card--arcade .game-piece:hover { background:transparent; }
}
@media (max-width: 620px) {body.home .shell.game-shell {
    width: 100%;
    padding-inline: 0;
  }
.game-section--arcade {
    padding: 0 0 6px;
  }
.game-card--arcade {
    padding: max(6px, env(safe-area-inset-top)) 6px 10px;
    border-radius: 0;
    min-height: 0;
  }
.arcade-topbar {
    min-height: 38px;
    margin-bottom: 2px;
  }
.arcade-exit-button {
    min-height: 34px;
    padding: 5px 10px 5px 8px;
    font-size: 10.5px;
    border-radius: 12px;
  }
.arcade-icon-button {
    width: 34px;
    height: 34px;
    padding: 6px;
  }
.arcade-hud {
    position: relative;
    display: block;
    min-height: 86px;
    margin-bottom: 8px;
  }
.arcade-mode {
    position: absolute;
    left: 0;
    top: 0;
    width: 96px;
    padding: 3px;
    margin: 0;
    border-radius: 12px;
  }
.arcade-mode .game-mode-switch {
    gap: 2px;
  }
.arcade-mode .game-mode-button {
    min-height: 28px;
    padding: 4px 2px;
    font-size: 10px;
  }
.score-row--arcade {
    width: 134px;
    margin: 0 auto;
    padding-bottom: 26px;
  }
.score-row--arcade .score-box--best {
    min-height: 35px;
    padding: 4px 6px;
    border-radius: 11px 11px 5px 5px;
  }
.score-row--arcade .score-box--best .score-box__best-line { font-size: 7px; }
.score-row--arcade .score-box--score {
    min-height: 46px;
    border-radius: 5px 5px 11px 11px;
  }
.score-row--arcade .score-box--score strong { font-size: 30px; }
.score-row--arcade .score-box--combo {
    top: calc(100% + 5px);
    min-width: 64px;
    min-height: 20px;
    padding: 2px 6px;
  }
.score-row--arcade .score-box--combo strong { font-size: 10px; }
.board-wrap--arcade {
    width: min(88vw, 382px);
    padding: 4px;
    border-radius: 12px;
  }
.game-card--arcade .game-board { gap: 2.4px; }
.game-card--arcade .board-cell { border-radius: 4px; }
.piece-area--arcade {
    min-height: 70px;
    padding-top: 4px;
  }
.game-card--arcade .piece-tray {
    min-height: 72px;
    height: 72px;
    gap: 4px;
  }
.game-card--arcade .game-piece {
    height: 68px;
    min-height: 68px;
    max-height: 68px;
    padding: 2px 1px;
    border-radius: 15px;
  }
.game-card--arcade .game-piece__grid {
    width: min(60px, 84%);
    gap: 2px;
  }
.game-toolbar--arcade {
    width: min(100%, 316px);
    gap: 10px;
    margin-top: 2px;
    justify-content: center;
  }
.arcade-power-button {
    gap: 4px;
    flex: 1 1 0;
  }
.arcade-power-button__disc {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }
.arcade-power-button__label {
    min-width: 54px;
    min-height: 18px;
    padding: 1px 6px;
    font-size: 7px;
  }
.game-card--arcade .game-status:not(:empty) {
    min-height: 14px;
    padding-top: 3px;
    font-size: 8px;
  }
.game-card--arcade .challenge-target {
    margin-top: 6px;
    padding: 7px 9px;
    font-size: 11px;
  }
.game-history-card {
    margin-top: 10px;
    border-radius: 18px;
    padding: 14px 12px;
  }
.game-history-card__head {
    gap: 10px;
    align-items: flex-start;
  }
.game-history-card__head h2 {
    font-size: 25px;
  }
.daily-streak {
    min-width: 86px;
    padding: 8px 10px;
  }
.game-lifetime-stats {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px;
  }
.game-achievements__list {
    grid-template-columns: 1fr;
  }
.feature-strip {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
  }
.feature-strip div {
    padding: 12px 10px;
    border-radius: 16px;
  }
}
@media (max-width: 620px) and (max-height: 760px) {.arcade-hud { min-height: 78px; margin-bottom: 6px; }
.arcade-mode { width: 90px; }
.score-row--arcade { width: 126px; padding-bottom: 22px; }
.score-row--arcade .score-box--best { min-height: 32px; }
.score-row--arcade .score-box--best strong { font-size: 17px; }
.score-row--arcade .score-box--score { min-height: 42px; }
.score-row--arcade .score-box--score strong { font-size: 28px; }
.board-wrap--arcade { width: min(84vw, 356px); }
.piece-area--arcade { min-height: 64px; }
.game-card--arcade .piece-tray { min-height: 66px; height: 66px; }
.game-card--arcade .game-piece { height: 62px; min-height: 62px; max-height: 62px; }
.game-card--arcade .game-piece__grid { width: min(55px, 82%); }
.game-toolbar--arcade { width: min(100%, 300px); gap: 8px; }
.arcade-power-button__disc { width: 40px; height: 40px; font-size: 18px; }
}
:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --text: #162033;
  --muted: #66758b;
  --line: #dce3ec;
  --brand: #1478d4;
  --brand-dark: #0d5da8;
  --accent: #f3b31d;
  --success: #20bf55;
  --purple: #7257d9;
  --navy: #0d1c38;
  --danger: #dc4b46;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(24, 39, 65, .07);
}
body {
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.62;
}
h1, h2, h3 { color: var(--text); letter-spacing: -.025em; }
::selection { background: #cce8ff; color: #10213f; }
.site-header {
  background: #0d1c38;
  border-bottom: 1px solid #223253;
  box-shadow: none;
  backdrop-filter: none;
}
.site-header__inner { min-height: 62px; }
.brand__link { color: #fff; font-size: 20px; text-shadow: none; }
.brand__mark {
  padding: 5px;
  border: 0;
  border-radius: 7px;
  background: #182b50;
  box-shadow: none;
}
.brand__mark i { border-radius: 1px; box-shadow: none; }
.brand__mark i:nth-child(1) { background: #36a9f4; }
.brand__mark i:nth-child(2) { background: #28c85b; }
.brand__mark i:nth-child(3) { background: #f2bd2a; }
.brand__mark i:nth-child(4) { background: #8a66dc; }
.custom-logo { max-height: 40px; }
.site-nav__list { gap: 4px; }
.site-nav a {
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 6px;
  color: #cbd6e7;
  font-size: 14px;
  font-weight: 700;
  transition: color .12s ease, background .12s ease;
}
.site-nav a:hover, .site-nav a:focus {
  color: #fff;
  background: #172a4d;
  transform: none;
}
.site-nav .current-menu-item > a, .site-nav .current_page_item > a {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 -2px 0 #42aef5;
}
.nav-toggle { color:#fff; border-radius:7px; background:#172a4d; }
.button {
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 9px;
  font-weight: 750;
  box-shadow: none;
  transition: background .12s ease,border-color .12s ease,color .12s ease;
}
.button:hover { transform:none; }
.button--primary {
  border-color: #168644;
  background: #1eb957;
  color: #fff;
  text-shadow: none;
  box-shadow: none;
}
.button--primary:hover { background:#169e49; filter:none; }
.button--secondary {
  border-color: #cfd9e5;
  background: #fff;
  color: #24415f;
  box-shadow: none;
}
.button--secondary:hover { border-color:#9fb1c6; background:#f8fafc; }
.button--text, .text-link { color:#126ebc; }
.eyebrow {
  margin-bottom: 7px;
  color: #126ebc;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .075em;
}
.home-main { background: var(--bg); }
.home-section { padding: 58px 0; }
.home-section--tight { padding: 20px 0 8px; }
.home-section--alt {
  background: #e9eef4;
  border-block: 1px solid #dce3eb;
}
.section-heading { margin-bottom: 22px; }
.section-heading h2 { color: var(--text); }
.section-copy p:not(.eyebrow) { color: var(--muted); }
.feature-strip {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
.feature-strip > div { border-color: var(--line); padding: 16px 19px; }
.feature-strip strong { color:#122642; font-size:21px; }
.feature-strip span { color:var(--muted); }
.steps-card {
  padding: 4px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:#fff;
  box-shadow:none;
}
.steps-card li { border-color:#e5eaf0; }
.steps-card li > span, 
.steps-card li:nth-child(2) > span, 
.steps-card li:nth-child(3) > span {
  border:0;
  border-radius:7px;
  background:#e8f3fc;
  color:#116cb6;
  box-shadow:none;
}
.tip-grid { gap:14px; }
.tip-card {
  overflow:visible;
  padding:20px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}
.tip-card::before { display:none; }
.tip-card__number {
  min-width:0;
  min-height:0;
  margin-bottom:14px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#1371bd;
  font-size:12px;
}
.tip-card p { color:var(--muted); }
.solver-banner {
  overflow:hidden;
  padding:28px 30px;
  border:1px solid #243757;
  border-radius:12px;
  background:#101f3b;
  box-shadow:none;
}
.solver-banner::after { display:none; }
.solver-banner .eyebrow { color:#69bced; }
.solver-banner p:not(.eyebrow) { color:#bdc9da; }
.guide-link-card {
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}
.guide-link-card:hover { border-color:#9eb5cb; box-shadow:none; }
.guide-link-card > span, 
.guide-link-card:nth-child(2) > span, 
.guide-link-card:nth-child(3) > span {
  background:#e8f3fc;
  color:#126db7;
  box-shadow:none;
}
.faq-wrap details {
  margin-bottom:0;
  padding:0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.faq-wrap details:first-child { border-top:1px solid var(--line); }
.faq-wrap summary { color:#1d2f47; padding-block:16px; }
.faq-wrap summary::after {
  top:13px;
  width:26px;
  height:26px;
  border-radius:5px;
  background:#e8edf4;
  color:#36516d;
}
.game-history-card {
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:none;
}
.game-history-card__head h2 { color:#18273d; }
.game-history-card__head .eyebrow { color:#126ebc; }
.game-lifetime-stats > div, 
.game-achievements, 
.game-achievement {
  border-color:#e0e6ed;
  border-radius:8px;
  background:#f7f9fb;
  box-shadow:none;
}
.daily-streak { border-radius:8px; box-shadow:none; }
.archive-header .eyebrow { color:#6ec6f5; }
.post-card {
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:none;
  transition:border-color .12s ease;
}
.post-card:hover { transform:none; border-color:#9fb2c8; box-shadow:none; }
.post-card__media { background:#e7ecf1; }
.post-card__body { padding:18px; }
.post-card__body h2, .post-card__body h3 { color:#18273d; }
.post-card__body h2 a:hover, .post-card__body h3 a:hover { color:#126ebc; }
.post-card__meta {
  width:auto;
  margin-bottom:8px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:#78879a!important;
  font-size:12px;
}
.post-card__body p { color:#68778c; }
.pagination .page-numbers.current {
  border-color:#126ebc;
  background:#126ebc;
  box-shadow:none;
}
.guide-hero .eyebrow { color:#6ec6f5; }
.guide-hero .button--secondary {
  border-color:#43536b;
  border-radius:7px;
  background:#182b48;
  color:#fff;
}
.guide-cta .eyebrow { color:#6ec6f5; }
.guide-cta .button--secondary { border-color:#43536b; background:#182b48; }
.article {
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:none;
}
.article__header .eyebrow{ color:#6ec6f5; }
.solver-hero .eyebrow { color:#6ec6f5; }
.solver-piece-slot.is-active { border-color:#298fd1; background:#eef7fd; box-shadow:none; }
.solver-shape-option.is-selected { border-color:#2388cb; background:#edf7fd; }
.site-footer {
  padding-top:44px;
  background:#0b162a;
  color:#fff;
}
.site-footer::after { display:none; }
.footer-brand { font-size:20px; }
.footer-brand__mark { border-radius:6px; background:#172947; }
.footer-brand__mark i { border-radius:1px; box-shadow:none; }
.site-footer p { color:#a8b7ca; }
.footer-nav { gap:8px 18px; }
.footer-nav a { color:#b9c7d8; font-weight:650; }
.site-footer__bottom { border-color:#24334b; color:#75869d; }
.site-footer__legal a { color:#aab9ca; }
@media (max-width:760px) {.site-header { background:#0d1c38; }
.site-nav {
    left:10px;
    right:10px;
    padding:5px;
    border:1px solid #263959!important;
    border-radius:8px;
    background:#0f203d!important;
    box-shadow:0 10px 26px rgba(4,11,24,.22);
  }
.site-nav__list li + li { border-color:#243650; }
.site-nav a { min-height:44px; border-radius:5px; }
.site-nav .current-menu-item > a, .site-nav .current_page_item > a {
    margin:0;
    border-radius:5px;
    background:#172d51;
    box-shadow:inset 3px 0 0 #42aef5;
  }
.home-section { padding:44px 0; }
.solver-banner { padding:22px 18px; border-radius:10px; }
.article { padding:14px; border-radius:10px; }
.site-footer { padding-top:38px; }
}
@media (max-width:540px) {.feature-strip > div { padding:14px 11px; }
.tip-card { padding:17px; }
.post-card__body { padding:16px; }
.game-history-card { border-radius:8px; }
}
:root {
  --home-shell: var(--shell);
  --home-frame-radius: 10px;
  --home-frame-border: #dce3eb;
}
.home-main .game-section--arcade > .game-shell, 
.home-main > .home-section > .shell {
  width: min(calc(100% - 32px), var(--home-shell));
  max-width: var(--home-shell);
  margin-inline: auto;
}
.home-main .faq-wrap { max-width: none; }
.home-main .game-card--arcade, 
.home-main .game-history-card, 
.home-main .feature-strip, 
.home-main .content-grid, 
.home-main .tip-grid, 
.home-main .solver-banner, 
.home-main .guide-link-grid, 
.home-main .post-grid--home, 
.home-main .faq-wrap {
  width: 100%;
}
.home-main .game-history-card, 
.home-main .feature-strip, 
.home-main .steps-card, 
.home-main .tip-card, 
.home-main .solver-banner, 
.home-main .guide-link-card, 
.home-main .post-grid--home .post-card {
  border-radius: var(--home-frame-radius);
}
.home-main .game-history-card, 
.home-main .feature-strip, 
.home-main .steps-card, 
.home-main .tip-card, 
.home-main .guide-link-card, 
.home-main .post-grid--home .post-card {
  border-color: var(--home-frame-border);
}
.home-main .home-section { padding: 46px 0; }
.home-main .home-section--tight { padding: 16px 0 6px; }
.home-main .section-heading { margin-bottom: 18px; }
.home-main .content-grid { gap: 26px; }
.home-main .tip-grid, 
.home-main .guide-link-grid, 
.home-main .post-grid--home { gap: 12px; }
.home-main .latest-guides-head { margin-top: 26px; }
.home-main .feature-strip > div { padding: 15px 16px; }
.home-main .game-history-card { margin-top: 12px; padding: 16px; }
.home-main .section-copy { padding: 4px 0; }
.home-main .steps-card { padding: 6px 16px; }
.home-main .steps-card li { padding: 16px 0; }
.home-main .solver-banner {
  padding: 24px 26px;
  border-radius: var(--home-frame-radius);
}
.home-main .faq-wrap details:first-of-type { margin-top: 2px; }
@media (max-width: 760px) {.home-main > .home-section > .shell {
    width: min(calc(100% - 24px), var(--home-shell));
  }
.home-main .game-section--arcade > .game-shell {
    width: 100%;
    max-width: none;
  }
.home-main .game-history-card {
    width: auto;
    margin: 10px 12px 0;
    padding: 14px 12px;
  }
.home-main .home-section { padding: 34px 0; }
.home-main .home-section--tight { padding: 12px 0 4px; }
.home-main .content-grid { gap: 16px; }
.home-main .section-heading { margin-bottom: 16px; }
.home-main .solver-banner { padding: 20px 16px; }
}
@media (max-width: 540px) {.home-main > .home-section > .shell { width: calc(100% - 24px); }
.home-main .feature-strip > div { padding: 12px 8px; }
.home-main .tip-grid, 
  .home-main .guide-link-grid, 
  .home-main .post-grid--home { gap: 9px; }
}
:root {
  --site-content-rail: var(--shell);
  --site-frame-radius: 10px;
  --site-frame-border: #dce3eb;
  --site-page-bg: #f2f4f7;
  --site-dark-panel: #101f3b;
  --site-dark-panel-border: #2d9fe8;
}
.content-main:not(.home-main){
  background: var(--site-page-bg);
}
.content-main:not(.home-main) {
  padding: 32px 0 64px;
}

.solver-hero > .shell, 
.solver-workspace-section > .shell, 
.solver-info-section > .shell, 
.solver-related-section > .shell, 
.solver-main > .home-section > .shell {
  width: min(calc(100% - 32px), var(--site-content-rail));
  max-width: var(--site-content-rail);
  margin-inline: auto;
}
.content-main:not(.home-main) .breadcrumbs{
  margin: 0 0 16px;
  font-size: 12px;
}
.content-layout .post-grid {
  gap: 12px;
}
.content-layout .post-card, 
.post-grid--related .post-card{
  border-color: var(--site-frame-border);
  border-radius: var(--site-frame-radius);
}
.content-layout .post-card__body, 
.post-grid--related .post-card__body {
  padding: 16px;
}
.article {
  width: 100%;
  padding: 18px 22px 28px;
  border-color: var(--site-frame-border);
  border-radius: var(--site-frame-radius);
}

.related-guides{
  max-width: 720px;
  margin-inline: auto;
}
.related-guides {
  margin-top: 34px;
}
.solver-main .home-section {
  padding: 40px 0;
}
.solver-main .home-section--alt {
  background: #e9eef4;
}
.solver-main .guide-link-grid, 
.solver-main .faq-wrap {
  width: 100%;
}
.solver-main .guide-link-card {
  border-radius: var(--site-frame-radius);
}
.solver-main .faq-wrap {
  max-width: none;
}
@media (max-width: 760px) {.content-main:not(.home-main) {
    padding: 20px 0 44px;
  }
.solver-hero > .shell, 
  .solver-workspace-section > .shell, 
  .solver-info-section > .shell, 
  .solver-related-section > .shell, 
  .solver-main > .home-section > .shell {
    width: calc(100% - 24px);
  }
.content-layout .post-grid{
    grid-template-columns: 1fr;
    gap: 9px;
  }
.article{
    margin: 0;
    padding: 14px 14px 22px;
    border-radius: 8px;
  }
.related-guides{
    max-width: none;
  }
.solver-main .home-section {
    padding: 32px 0;
  }
}
.site-footer {
  margin-top: 56px;
  padding: 0;
  border-top: 1px solid #223653;
  background: #0b1729;
  color: #fff;
}
.site-footer .shell {
  width: min(calc(100% - 32px), var(--shell));
}
.site-footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 56px;
  align-items: start;
  padding-top: 38px;
  padding-bottom: 28px;
}
.site-footer__brand-block { max-width: 440px; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
}
.footer-brand__mark {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 2px;
  padding: 5px;
  border: 1px solid #314866;
  border-radius: 5px;
  background: #13243d;
}
.footer-brand__mark i {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  box-shadow: none;
}
.site-footer__tagline {
  max-width: 430px;
  margin: 13px 0 15px;
  color: #a9b8ca !important;
  font-size: 13px;
  line-height: 1.65;
}
.site-footer__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 30px;
}
.footer-group h2 {
  margin: 0 0 10px;
  color: #e9f2fb;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.footer-group ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-group a {
  color: #aebfd2;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
}
.footer-group a:hover, 
.footer-group a:focus-visible { color: #fff; }
.site-footer__note {
  padding-top: 13px;
  padding-bottom: 13px;
  border-top: 1px solid #1e3049;
  border-bottom: 1px solid #1e3049;
}
.site-footer__note p {
  max-width: 760px;
  margin: 0;
  color: #73869e !important;
  font-size: 11px;
  line-height: 1.55;
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 0;
  padding-top: 15px;
  padding-bottom: 18px;
  border-top: 0;
  color: #6f829a;
  font-size: 11px;
}
.site-footer__legal a { color: #94a8bf; text-decoration: none; }
@media (max-width: 760px) {.site-footer { margin-top: 42px; }
.site-footer .shell { width: min(calc(100% - 24px), var(--shell)); }
.site-footer__main {
    grid-template-columns: 1fr;
    gap: 27px;
    padding-top: 28px;
    padding-bottom: 22px;
  }
.site-footer__brand-block { max-width: none; }
.site-footer__links { gap: 22px; }
.site-footer__bottom { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {.site-footer__links { grid-template-columns: 1fr 1fr; gap: 16px; }
.footer-group a { font-size: 12px; }
.site-footer__bottom { align-items: flex-start; }
}
.site-header, 
.home .site-header {
  background: #0b1729;
  border-bottom: 1px solid #223653;
  box-shadow: none;
  backdrop-filter: none;
}
.site-header__inner, 
.home .site-header__inner {
  width: min(calc(100% - 32px), var(--shell));
  min-height: 58px;
  padding: 0;
  gap: 22px;
}
.brand, 
.home .brand { min-width: 0; flex: 0 1 auto; }
.brand__link, 
.home .brand__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-shadow: none;
}
.brand__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand__mark, 
.home .brand__mark {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 7px);
  grid-template-rows: repeat(2, 7px);
  gap: 2px;
  padding: 5px;
  border: 1px solid #314866;
  border-radius: 5px;
  background: #13243d;
  box-shadow: none;
}
.brand__mark i, 
.home .brand__mark i {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  box-shadow: none;
}
.brand__mark i:nth-child(1), .home .brand__mark i:nth-child(1){background:#25baff}
.brand__mark i:nth-child(2), .home .brand__mark i:nth-child(2){background:#24d848}
.brand__mark i:nth-child(3), .home .brand__mark i:nth-child(3){background:#ffc51c}
.brand__mark i:nth-child(4), .home .brand__mark i:nth-child(4){background:#a94ff0}
.custom-logo-link { flex: 0 1 auto; min-width: 0; }
.custom-logo { max-height: 34px; width: auto; }
.site-nav, 
.home .site-nav { margin-left: auto; }
.site-nav__list, 
.home .site-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
}
.site-nav a, 
.home .site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #b9c7d8;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
  transform: none;
  transition: color .12s ease, background-color .12s ease;
}
.site-nav a:hover, .site-nav a:focus-visible, 
.home .site-nav a:hover, .home .site-nav a:focus-visible {
  color: #fff;
  background: #132842;
  box-shadow: none;
  transform: none;
}
.site-nav .current-menu-item > a, 
.site-nav .current_page_item > a, 
.site-nav a[aria-current="page"], 
.home .site-nav .current-menu-item > a, 
.home .site-nav .current_page_item > a, 
.home .site-nav a[aria-current="page"] {
  color: #fff;
  background: transparent;
  box-shadow: inset 0 -2px 0 #25baff;
}
.nav-toggle, 
.home .nav-toggle {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #314866;
  border-radius: 5px;
  background: #13243d;
  color: #dce8f5;
  box-shadow: none;
}
.nav-toggle:hover, .nav-toggle:focus-visible, 
.home .nav-toggle:hover, .home .nav-toggle:focus-visible {
  border-color: #48698f;
  background: #17304f;
  color: #fff;
}
.nav-toggle__bars i { border-radius: 1px; }
@media (max-width: 760px) {.site-header__inner, 
  .home .site-header__inner {
    width: min(calc(100% - 24px), var(--shell));
    min-height: 54px;
    gap: 10px;
  }
.brand__link, .home .brand__link { font-size: 17px; gap: 8px; }
.custom-logo { max-height: 32px; }
.nav-toggle { display: inline-flex; margin-left: auto; }
.nav-toggle__label { font-size: 12px; }
.site-nav, 
  .home .site-nav {
    position: absolute;
    left: 11px;
    right: 11px;
    top: 100%;
    display: none;
    margin: 0;
    padding: 4px;
    border: 1px solid #223653 !important;
    border-top-color: #1a2d49 !important;
    border-radius: 0 0 8px 8px;
    background: #0b1729 !important;
    box-shadow: 0 10px 22px rgba(3,13,27,.22);
  }
.site-nav.is-open, .home .site-nav.is-open { display: block; }
.site-nav__list, .home .site-nav__list { display: block; }
.site-nav__list li + li, .home .site-nav__list li + li { border-top: 1px solid #1e3049; }
.site-nav a, .home .site-nav a {
    justify-content: flex-start;
    min-height: 43px;
    padding: 10px 11px;
    border-radius: 4px;
    color: #c6d4e5 !important;
    font-size: 13px;
  }
.site-nav a:hover, .site-nav a:focus-visible, 
  .home .site-nav a:hover, .home .site-nav a:focus-visible {
    background: #132842;
    color: #fff !important;
  }
.site-nav .current-menu-item > a, 
  .site-nav .current_page_item > a, 
  .site-nav a[aria-current="page"], 
  .home .site-nav .current-menu-item > a, 
  .home .site-nav .current_page_item > a, 
  .home .site-nav a[aria-current="page"] {
    margin: 0;
    background: #10233c;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #25baff;
  }
}
@media (min-width: 1000px) {.home .game-card--arcade {
    width: min(100%, 760px);
    margin-inline: auto;
    padding: 10px 14px 14px;
    border-radius: 24px;
  }
.home .arcade-topbar {
    min-height: 44px;
    margin-bottom: 2px;
  }
.home .arcade-exit-button {
    min-height: 38px;
    padding: 6px 11px 6px 9px;
    font-size: 12px;
  }
.home .arcade-icon-button {
    width: 40px;
    height: 40px;
    padding: 8px;
  }
.home .arcade-icon-button svg {
    width: 22px;
    height: 22px;
  }
.home .arcade-hud {
    min-height: 116px;
    grid-template-columns: minmax(150px,1fr) 154px minmax(150px,1fr);
    gap: 10px;
    margin-bottom: 8px;
  }
.home .game-card--arcade .arcade-mode {
    width: 164px;
    margin-top: 2px;
    padding: 4px;
    border-radius: 12px;
  }
.home .game-card--arcade .arcade-mode .game-mode-switch {
    min-height: 34px;
  }
.home .game-card--arcade .arcade-mode .game-mode-button {
    min-height: 29px;
    padding: 4px 7px;
    font-size: 10px;
  }
.home .game-card--arcade .arcade-hud-spacer { width: 164px; }
.home .score-row--arcade {
    width: 154px;
    padding-bottom: 28px;
  }
.home .score-row--arcade .score-box--best {
    min-height: 44px;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 12px 12px 6px 6px;
  }
.home .score-row--arcade .score-box--best .score-box__best-line {
    font-size: 8px;
  }
.home .score-crown { font-size: 19px; }
.home .score-row--arcade .score-box--best strong { font-size: 21px; }
.home .score-row--arcade .score-box--score {
    min-height: 58px;
    border-radius: 6px 6px 12px 12px;
  }
.home .score-row--arcade .score-box--score strong { font-size: 38px; }
.home .score-row--arcade .score-box--combo {
    top: calc(100% + 5px);
    min-width: 72px;
    min-height: 22px;
    padding: 3px 7px;
  }
.home .score-row--arcade .score-box--combo span { display: none; }
.home .score-row--arcade .score-box--combo strong { font-size: 12px; }
.home .board-wrap--arcade {
    width: 520px;
    max-width: 520px;
    padding: 6px;
    border-radius: 15px;
  }
.home .game-card--arcade .game-board {
    gap: 3px;
    padding: 1px;
    border-radius: 8px;
  }
.home .game-card--arcade .board-cell { border-radius: 5px; }
.home .game-card--arcade .piece-area--arcade {
    width: 560px;
    min-height: 104px;
    padding-top: 7px;
  }
.home .game-card--arcade .piece-area__hint {
    min-height: 15px;
    margin-bottom: 3px;
    font-size: 10px;
  }
.home .game-card--arcade .piece-tray {
    min-height: 92px;
    height: 92px;
    padding: 4px;
    border-radius: 16px;
  }
.home .game-card--arcade .game-piece, 
  .home .game-card--arcade .game-piece--empty {
    height: 86px;
    min-height: 86px;
    max-height: 86px;
    border-radius: 13px;
  }
.home .game-toolbar--arcade.game-toolbar--primary {
    width: 390px;
    gap: 14px;
    margin-top: 0;
  }
.home .game-toolbar--primary .arcade-power-button {
    min-height: 70px;
  }
.home .game-toolbar--primary .arcade-power-button__disc {
    width: 50px;
    height: 50px;
    border-width: 4px;
    font-size: 23px;
  }
.home .game-toolbar--primary .arcade-power-button__label {
    min-width: 62px;
    min-height: 21px;
    padding: 2px 7px;
    font-size: 8px;
  }
.home .game-card--arcade .game-status {
    min-height: 16px;
    padding-top: 4px;
    font-size: 9px;
  }
}
.site-footer__links { grid-template-columns: repeat(3,minmax(0,1fr)); }
.site-footer__legal { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; }
@media (max-width:620px) {.site-footer__links { grid-template-columns: repeat(2,minmax(0,1fr)); }
.site-footer__legal { gap:10px; }
}
@media (max-width:390px) {.site-footer__links { grid-template-columns:1fr; }
}
.content-layout .guide-hub-core .guide-link-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 820px) {.content-layout .guide-hub-core .guide-link-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {.content-layout .guide-hub-core .guide-link-grid { grid-template-columns: 1fr; }
}
.section-subheading { margin: 24px 0 12px; }
.section-subheading h3 { margin: 0; font-size: 20px; }
.guide-link-grid--questions { margin-top: 0; }
.shape-mini-grid i.is-filled { background: linear-gradient(180deg,#56c9ff,#1398ef 58%,#0876c8); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.1); }
.related-guides {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #dbe3ec;
}
.related-guides__head { margin-bottom: 14px; }
.related-guides__head .eyebrow { margin-bottom: 4px; }
.related-guides__head h2 { margin: 0; font-size: 22px; }
.related-guides__grid { margin-top: 0; }
@media (max-width: 620px) {.related-guides { margin-top: 22px; padding-top: 20px; }
.related-guides__head h2 { font-size: 20px; }
}
.related-guides__head, 
.related-questions__head, 
.guide-pathways__head { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:16px; }
.related-guides__head h2, 
.related-questions__head h2, 
.guide-pathways__head h2 { margin:0; }
.related-questions { margin:34px 0 0; }
.related-questions__list { border-top:1px solid var(--border); }
.related-questions__list details { border-bottom:1px solid var(--border); background:#fff; }
.related-questions__list summary { cursor:pointer; padding:15px 4px; font-weight:800; color:var(--ink); }
.related-questions__list p { margin:0; padding:0 4px 16px; color:var(--muted); line-height:1.68; }
.guide-pathways { margin:30px 0 38px; }
.guide-pathways__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.guide-pathway-card { padding:18px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.guide-pathway-card h3 { margin:0 0 6px; font-size:19px; }
.guide-pathway-card > p { margin:0 0 13px; color:var(--muted); line-height:1.55; }
.guide-pathway-card ul { margin:0; padding:0; list-style:none; display:grid; gap:7px; }
.guide-pathway-card a { font-weight:800; text-decoration:none; color:var(--brand-dark); }
.guide-pathway-card a:hover { text-decoration:underline; }
@media (max-width:620px) {.related-guides__head, .related-questions__head, .guide-pathways__head { align-items:flex-start; }
.related-guides__head .text-link { white-space:nowrap; font-size:12px; }
.guide-pathways { margin:22px 0 30px; }
.guide-pathways__grid { grid-template-columns:1fr; gap:9px; }
.guide-pathway-card { padding:15px; }
.related-questions { margin-top:26px; }
}
.home-info-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: 28px;
  align-items: stretch;
  padding: 28px 30px;
  border: 1px solid var(--home-frame-border);
  border-radius: var(--home-frame-radius);
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  box-shadow: 0 14px 34px rgba(20, 39, 76, .05);
}
.home-info-panel--browser {
  background:
    radial-gradient(circle at top right, rgba(22,143,231,.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.home-info-panel--howto {
  background:
    radial-gradient(circle at bottom right, rgba(125,67,231,.06), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
}
.home-info-panel .section-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.home-main .home-info-panel .section-copy { padding: 0; }
.section-copy--home h2 { max-width: 11ch; margin-bottom: 14px; }
.section-copy--home p:not(.eyebrow) { max-width: 62ch; }
.home-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.home-side-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 22px;
  border: 1px solid #dbe7f6;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
}
.home-side-panel__head .eyebrow { margin-bottom: 8px; }
.home-side-panel__head h3 {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.18;
}
.home-value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-value-grid li {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid #deebf9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(20, 39, 76, .04);
}
.home-value-grid strong {
  color: #172b46;
  font-size: 15px;
  line-height: 1.3;
}
.home-value-grid span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.52;
}
.steps-card--home {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.home-main .steps-card--home { padding: 0; }
.steps-card--home li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  margin-bottom: 10px;
  border: 1px solid #deebf9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(20, 39, 76, .04);
}
.home-main .steps-card--home li {
  padding: 16px;
  border-bottom: 1px solid #deebf9;
}
.steps-card--home li:last-child { margin-bottom: 0; }
.steps-card--home li > span, 
.home-main .steps-card--home li > span, 
.home-main .steps-card--home li:nth-child(2) > span, 
.home-main .steps-card--home li:nth-child(3) > span {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.steps-card--home li:nth-child(1) > span { background: linear-gradient(180deg, #4fb7ff, #147ddf); }
.steps-card--home li:nth-child(2) > span { background: linear-gradient(180deg, #57dc70, #14b737); }
.steps-card--home li:nth-child(3) > span { background: linear-gradient(180deg, #cb72ff, #8a39df); }
.steps-card--home strong { display: block; margin-bottom: 4px; font-size: 18px; line-height: 1.28; }
.steps-card--home p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 920px) {.home-info-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }
.section-copy--home h2, 
  .section-copy--home p:not(.eyebrow) { max-width: none; }
}
@media (max-width: 760px) {.home-info-panel { padding: 18px; gap: 16px; }
.home-side-panel { padding: 16px; }
.home-value-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {.home-info-panel { padding: 16px; border-radius: 20px; }
.home-panel-actions .button { width: 100%; }
.home-value-grid { grid-template-columns: 1fr; }
.steps-card--home li, 
  .home-main .steps-card--home li { padding: 14px; }
}
:root {
  --portal-navy: #0a1930;
  --portal-navy-2: #102642;
  --portal-blue: #25a8ee;
  --portal-line: #d9e2ec;
  --portal-paper: #ffffff;
}
.site-header, 
.home .site-header {
  background: var(--portal-navy);
  border-bottom: 1px solid #203958;
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0 12%, rgba(37,168,238,.7) 36%, rgba(37,168,238,.7) 64%, transparent 88%);
  pointer-events: none;
}
.site-header__inner, 
.home .site-header__inner { min-height: 60px; }
.brand__link, 
.home .brand__link { font-size: 17px; letter-spacing: -.015em; }
.brand__mark, 
.home .brand__mark, 
.footer-brand__mark {
  border-color: #315070;
  background: #102642;
}
.site-nav a, 
.home .site-nav a {
  min-height: 38px;
  padding-inline: 10px;
  color: #b9c9d9;
  font-size: 13px;
  font-weight: 700;
}
.site-nav a:hover, .site-nav a:focus-visible, 
.home .site-nav a:hover, .home .site-nav a:focus-visible {
  background: #132b49;
}
.site-nav .current-menu-item > a, 
.site-nav .current_page_item > a, 
.site-nav a[aria-current="page"], 
.home .site-nav .current-menu-item > a, 
.home .site-nav .current_page_item > a, 
.home .site-nav a[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--portal-blue);
}
@media (min-width: 761px) {.home .game-heading--compact {
    width: min(100%, 760px);
    margin: 0 auto 10px;
    padding: 16px 18px 15px;
    border: 1px solid #203958;
    border-left: 4px solid var(--portal-blue);
    border-radius: 10px;
    background: var(--portal-navy);
  }
.home .game-heading--compact .eyebrow {
    margin-bottom: 5px;
    color: #75cdf7;
    font-size: 11px;
  }
.home .game-heading--compact h1 {
    margin-bottom: 4px;
    color: #fff;
    font-size: clamp(25px, 3vw, 31px);
    letter-spacing: -.02em;
  }
.home .game-heading--compact .game-intro {
    max-width: 680px;
    color: #b7c7d9;
    font-size: 13px;
    line-height: 1.55;
  }
}
.home-info-panel {
  border-color: var(--portal-line);
  border-radius: 10px;
  background: var(--portal-paper);
  box-shadow: none;
}
.home-info-panel--browser, 
.home-info-panel--howto { background: #fff; }
.home-side-panel {
  border-color: #dfe6ee;
  border-radius: 8px;
  background: #f6f8fb;
}
.home-value-grid { gap: 0; border-top: 1px solid #dfe6ee; }
.home-value-grid li {
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid #dfe6ee;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.home-value-grid li:nth-child(odd) { border-right: 1px solid #dfe6ee; }
.steps-card--home li, 
.home-main .steps-card--home li {
  margin-bottom: 0;
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid #dfe6ee;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.steps-card--home li:last-child, 
.home-main .steps-card--home li:last-child { border-bottom: 0; }
.steps-card--home li > span, 
.home-main .steps-card--home li > span, 
.home-main .steps-card--home li:nth-child(2) > span, 
.home-main .steps-card--home li:nth-child(3) > span {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #e7f4fc;
  color: #126ebc;
  box-shadow: none;
}
.steps-card--home li:nth-child(1) > span, 
.steps-card--home li:nth-child(2) > span, 
.steps-card--home li:nth-child(3) > span { background: #e7f4fc; color: #126ebc; }
.steps-card--home strong { font-size: 16px; }
.home-panel-actions .button { border-radius: 7px; }
.guide-link-card, 
.home-main .guide-link-card, 
.content-layout .guide-link-card, 
.solver-main .guide-link-card {
  grid-template-columns: 34px minmax(0,1fr);
  gap: 2px 12px;
  padding: 16px 16px 16px 14px;
  border: 1px solid #dce4ed;
  border-left: 3px solid #1d8ed7;
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.guide-link-card:hover, 
.home-main .guide-link-card:hover, 
.content-layout .guide-link-card:hover, 
.solver-main .guide-link-card:hover {
  transform: none;
  border-color: #a9c1d5;
  border-left-color: #1478c7;
  background: #f9fbfd;
  box-shadow: none;
}
.guide-link-card > span, 
.guide-link-card:nth-child(2) > span, 
.guide-link-card:nth-child(3) > span, 
.home-main .guide-link-card > span, 
.content-layout .guide-link-card > span {
  grid-row: 1 / span 2;
  display: block;
  width: auto;
  height: auto;
  padding-top: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1478c7;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.4;
  box-shadow: none;
}
.guide-link-card strong { font-size: 16px; line-height: 1.28; }
.guide-link-card small { font-size: 12.5px; line-height: 1.45; }
.post-card, 
.content-layout .post-card, 
.post-grid--related .post-card, 
.home-main .post-grid--home .post-card {
  overflow: hidden;
  border: 1px solid #dce4ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  transition: border-color .12s ease, background-color .12s ease;
}
.post-card:hover, 
.content-layout .post-card:hover, 
.post-grid--related .post-card:hover, 
.home-main .post-grid--home .post-card:hover {
  transform: none;
  border-color: #a9bbc9;
  background: #fbfcfd;
  box-shadow: none;
}
.post-card__media { background: #e8edf2; }
.post-card__body { padding: 17px; }
.post-card__meta {
  margin: 0 0 7px;
  color: #77869a !important;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.post-card__body h2, 
.post-card__body h3, 
.post-grid--home .post-card__body h3, 
.post-grid--related .post-card__body h3 {
  margin-bottom: 7px;
  color: #17283d;
  font-size: 18px;
  line-height: 1.3;
}
.post-card__body p { font-size: 13.5px; line-height: 1.55; }
.post-card .text-link { font-size: 13px; font-weight: 800; }
.site-footer {
  margin-top: 48px;
  border-top-color: #203958;
  background: var(--portal-navy);
}
.site-footer__main {
  grid-template-columns: minmax(250px,.9fr) minmax(0,1.1fr);
  gap: 42px;
  padding-top: 32px;
  padding-bottom: 24px;
}
.site-footer__brand-block { max-width: 360px; }
.site-footer__tagline { margin-bottom: 0; }
.site-footer__links {
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}
.footer-group h2 { margin-bottom: 9px; color: #e5eef8; }
.footer-group ul { gap: 7px; }
.footer-group a { color: #aabbd0; }
.site-footer__note { padding-block: 11px; }
.site-footer__bottom { padding-top: 13px; padding-bottom: 16px; }
@media (max-width: 760px) {.site-footer__main { gap: 24px; }
.site-footer__links { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 22px; }
.home-value-grid li:nth-child(odd) { border-right: 0; }
}
@media (max-width: 420px) {.site-footer__links { grid-template-columns: 1fr; }
.home-info-panel { border-radius: 8px; }
}
.site-footer {
  margin-top: 44px;
  padding: 0;
  border-top: 1px solid #203751;
  background: #0a1729;
  color: #fff;
}
.site-footer__main {
  display: grid;
  grid-template-columns: minmax(260px,.9fr) minmax(0,1.1fr);
  gap: 46px;
  align-items: start;
  padding: 30px 0 22px;
}
.site-footer__brand-block {
  max-width: 350px;
}
.footer-brand {
  gap: 10px;
  color: #fff;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.2;
}
.footer-brand__mark {
  grid-template-columns: repeat(2,7px);
  gap: 2px;
  padding: 5px;
  border: 1px solid #31506f;
  border-radius: 6px;
  background: #11243d;
}
.footer-brand__mark i { width: 7px; height: 7px; }
.site-footer__tagline {
  max-width: 340px;
  margin: 11px 0 0;
  color: #9eb0c7 !important;
  font-size: 12.5px;
  line-height: 1.55;
}
.site-footer__links {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}
.footer-group {
  min-width: 0;
}
.footer-group h2 {
  margin: 0 0 9px;
  color: #eaf2fa;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.footer-group ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-group a {
  display: inline-block;
  color: #aabbd0;
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
  text-decoration: none;
}
.site-footer__note {
  padding: 10px 0;
  border-top: 1px solid #1f3249;
  border-bottom: 1px solid #1f3249;
}
.site-footer__note p {
  max-width: none;
  margin: 0;
  color: #71859e !important;
  font-size: 10.5px;
  line-height: 1.5;
}
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 12px 0 max(14px,env(safe-area-inset-bottom));
  border: 0;
  color: #71859d;
  font-size: 10.5px;
}
.site-footer__legal {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  flex-wrap: wrap;
}
.site-footer__legal a {
  color: #98aac0;
  text-decoration: none;
}
.site-footer__legal a:hover, 
.site-footer__legal a:focus-visible { color: #fff; }
@media (max-width: 760px) {.site-footer {
    margin-top: 34px;
  }
.site-footer .shell {
    width: calc(100% - 24px);
  }
.site-footer__main {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 0 18px;
  }
.site-footer__brand-block {
    max-width: none;
    padding-bottom: 1px;
  }
.footer-brand {
    font-size: 20px;
  }
.site-footer__tagline {
    max-width: 540px;
    margin-top: 9px;
    font-size: 12px;
  }
.site-footer__links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid #20334b;
  }
.footer-group {
    display: grid;
    grid-template-columns: 70px minmax(0,1fr);
    align-items: baseline;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #20334b;
  }
.footer-group h2 {
    margin: 0;
    font-size: 10px;
  }
.footer-group ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 14px;
  }
.footer-group li {
    display: inline-flex;
    align-items: center;
  }
.footer-group li:not(:last-child)::after {
    content: "·";
    margin-left: 14px;
    color: #40536b;
  }
.footer-group a {
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
  }
.site-footer__note {
    padding: 9px 0;
    border-top: 0;
  }
.site-footer__note p {
    font-size: 10px;
    line-height: 1.45;
  }
.site-footer__bottom {
    align-items: center;
    flex-direction: row;
    padding-top: 11px;
  }
}
@media (max-width: 430px) {.site-footer .shell { width: calc(100% - 24px); }
.site-footer__main { gap: 17px; padding-top: 21px; }
.footer-brand { font-size: 19px; }
.site-footer__tagline {
    max-width: 34em;
    font-size: 11.5px;
  }
.footer-group {
    grid-template-columns: 60px minmax(0,1fr);
    gap: 9px;
    padding: 10px 0;
  }
.footer-group ul { gap: 5px 10px; }
.footer-group li:not(:last-child)::after { margin-left: 10px; }
.footer-group a { font-size: 11.5px; }
.site-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
.site-footer__legal {
    justify-content: flex-start;
    gap: 12px;
  }
}


/* v6.2 international language switcher + RTL safeguards */
.language-switcher {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.language-switcher__icon {
  color: #8fdcff;
  font-size: 15px;
  line-height: 1;
}
.language-switcher select {
  width: auto;
  max-width: 148px;
  min-height: 34px;
  padding: 5px 28px 5px 9px;
  border: 1px solid #314866;
  border-radius: 5px;
  background-color: #13243d;
  color: #e7f1fb;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.language-switcher select:hover,
.language-switcher select:focus-visible {
  border-color: #4e729a;
  outline: none;
  background-color: #17304f;
  color: #fff;
}
.language-switcher__submit {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.bbo-rtl #bbo-board,
.bbo-rtl #bbo-pieces,
.bbo-rtl .game-board,
.bbo-rtl .piece-tray { direction: ltr; }
.bbo-rtl .content-card,
.bbo-rtl .tip-card,
.bbo-rtl .faq-wrap,
.bbo-rtl .game-heading { text-align: right; }
.bbo-rtl .faq-wrap summary { padding-right: 0; padding-left: 30px; }
.bbo-rtl .faq-wrap summary::after { right: auto; left: 0; }
@media (max-width: 760px) {
  .language-switcher { margin-left: auto; }
  .language-switcher__icon { display: none; }
  .language-switcher select {
    max-width: 102px;
    min-height: 34px;
    padding-left: 7px;
    padding-right: 24px;
    font-size: 11px;
  }
  .nav-toggle { margin-left: 0 !important; }
}
@media (max-width: 390px) {
  .language-switcher select { max-width: 88px; }
  .brand__text { max-width: 116px; }
}

/* v6.12.0 performance layer -------------------------------------------------
 * Keep the homepage independent from the 24 KB traffic/retention stylesheet.
 * Only the three traffic-tool component primitives used by front-page.php live
 * here. Dedicated traffic pages continue to load assets/css/traffic.css.
 */
.home-section--traffic-tools .traffic-tool-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
}
.home-section--traffic-tools .traffic-tool-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  color: inherit;
  box-shadow: 0 10px 30px rgba(15,23,42,.05);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .16s ease;
}
.home-section--traffic-tools .traffic-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(15,23,42,.10);
}
.home-section--traffic-tools .traffic-tool-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 14px;
  background: #eaf4ff;
  color: #0b72c8;
  font-size: 1.45rem;
}
.home-section--traffic-tools .traffic-tool-card h3 {
  margin: .1rem 0 .65rem;
  line-height: 1.2;
}
.home-section--traffic-tools .traffic-tool-card p {
  color: #64748b;
  line-height: 1.65;
}
.home-section--traffic-tools .traffic-tool-card > strong { color: #0b72c8; }

/* Skip layout/paint work for content far below the initial game viewport.
 * `auto` keeps the browser's remembered intrinsic size after first layout and
 * unsupported browsers simply ignore this progressive enhancement.
 */
@supports (content-visibility: auto) {
  .home-main > .home-section:nth-of-type(n+3) {
    content-visibility: auto;
    contain-intrinsic-size: auto 680px;
  }
}

@media (max-width: 600px) {
  .home-section--traffic-tools .traffic-tool-card {
    padding: 18px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-section--traffic-tools .traffic-tool-card { transition: none; }
}