/* Page-scoped games styles: Tutor Ben blue (#4387cd), black, white and neutral tones only. */
/* This stylesheet is loaded only on the games page; shared site files stay unchanged. */
[data-theme=light] { --bg-body: #f8f8f8; --border: #e6e6e6; }
[data-theme=dark] { --ink: #e8e8e8; --muted: #bcbcbc; --border: #333333; --bg-body: #080808; --bg-nav: rgba(0,0,0,.94); --bg-nav-scrolled: rgba(0,0,0,.98); --bg-mobile-menu: #111111; }
[data-theme=light] body { background: var(--bg-body); }
[data-theme=dark] .tb-games-heading h2 { color: var(--ink); }
[data-theme=dark] .page-hero .eyebrow, [data-theme=dark] .cta-section .eyebrow, [data-theme=dark] .site-footer .text-link { color: #fff; }
[data-theme=dark] .tb-games-heading > p:last-child:not(.eyebrow) { color: var(--muted); }
.site-header .theme-toggle { background: #d4d4d4; }
[data-theme=dark] .site-header .theme-toggle { background: #333333; }
.site-header .theme-toggle .toggle-icon { color: #4387cd; }
.site-header .nav-btn-ghost { border-color: var(--border); }
[data-theme=dark] .site-header .nav-links > a:not(.active), [data-theme=dark] .site-header .nav-btn-ghost { color: #d0d0d0; }
.site-header .nav-btn-platforms { background: #4387cd; color: #000; }
.site-header .platforms-menu { border-color: #e6e6e6; }
.site-header .platform-item:hover { background: #4387cd14; }
.tb-games-section { padding-top: 60px; padding-bottom: 70px; }
.tb-games-heading { text-align: center; margin: 0 auto 48px; }
.tb-games-heading p { margin-left: auto; margin-right: auto; max-width: 650px; }
.tb-games-heading .eyebrow { justify-content: center; color: #161616; }
.tb-games-menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tb-game-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 28px 24px; border: 1px solid #e6e6e6; border-radius: 18px; background: #fff; color: #111; transition: transform .2s, box-shadow .2s, border-color .2s; min-width: 0; }
.tb-game-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px #4387cd26; border-color: #4387cd; }
.tb-card-icon { width: 56px; height: 56px; border-radius: 16px; background: #4387cd14; color: #4387cd; display: grid; place-items: center; margin-bottom: 16px; }
.tb-card-icon svg { width: 28px; height: 28px; }
.tb-card-title { font: 700 1.1rem/1.35 var(--heading); margin-bottom: 8px; }
.tb-card-description { font-size: .9rem; line-height: 1.65; color: #595959; margin-bottom: 16px; }
.tb-card-tags { font-size: .7rem; color: #595959; margin-top: auto; margin-bottom: 12px; }
.tb-card-cta { font-size: .85rem; font-weight: 700; color: #161616; display: flex; gap: 6px; }
.tb-game-area { margin-top: 32px; background: linear-gradient(145deg, #121212, #000000); color: #fff; border-radius: 20px; padding: 28px 26px; border: 1px solid #4387cd33; box-shadow: 0 8px 40px #0000002e; }
.tb-game-area[hidden], .tb-games-menu[hidden], .tb-game-area [hidden] { display: none !important; }
.tb-game-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.tb-game-header h2 { font-size: 1.25rem; color: #fff; }
.tb-game-board { max-width: 800px; margin: 0 auto; }
.tb-game-area button { font: 600 .875rem/1.5 var(--font); }
.tb-game-area button:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }
.tb-game-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 22px; border-radius: 10px; background: #4387cd; color: #000000; font-weight: 700 !important; border: 1px solid transparent; }
.tb-game-btn:hover { background: #4387cd; box-shadow: 0 0 0 2px #ffffff; }
.tb-game-outline { background: transparent; color: #fff; border-color: #ffffff66; }
.tb-game-outline:hover { color: #ffffff; background: #4387cd1a; border-color: #4387cd; }
.tb-game-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 20px; }
.tb-game-intro, .tb-game-results { text-align: center; max-width: 600px; margin: 12px auto; padding: 20px 0; }
.tb-game-intro h3, .tb-game-results h3 { color: #fff; font-size: 1.5rem; margin-bottom: 16px; }
.tb-game-intro p, .tb-game-results p { color: #d0d0d0; line-height: 1.8; margin: 12px 0 20px; }
.tb-game-scorebar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-radius: 14px; background: #00000099; border: 1px solid #4387cd40; margin-bottom: 24px; }
.tb-game-stat { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tb-game-stat span { font: 600 .7rem/1.4 var(--font); color: #bcbcbc; text-transform: uppercase; letter-spacing: .06em; }
.tb-game-stat strong { font-size: 1.25rem; color: #4387cd; }
.tb-game-prompt { text-align: center; font: 600 1.2rem/1.65 var(--heading); color: #fff; margin-bottom: 22px; overflow-wrap: anywhere; }
.tb-game-help { text-align: center; color: #d0d0d0; font-size: .85rem; margin-bottom: 18px; }
.tb-game-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tb-game-choice, .tb-match-tile { min-height: 66px; padding: 16px; color: #fff; border: 2px solid #4387cd80; background: #00000099; border-radius: 12px; overflow-wrap: anywhere; }
.tb-game-choice:hover:not(:disabled), .tb-match-tile:hover:not(:disabled) { border-color: #4387cd; background: #4387cd26; }
.tb-game-choice:disabled, .tb-match-tile:disabled { cursor: default; opacity: .8; }
.tb-game-choice.tb-correct, .tb-match-tile.tb-correct { background: #4387cd26; border-color: #4387cd; color: #ffffff; }
.tb-game-choice.tb-wrong, .tb-match-tile.tb-wrong { background: #ffffff0a; border-color: #ffffff; border-style: dashed; }
.tb-match-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tb-match-tile { min-height: 100px; font-size: .82rem !important; }
.tb-match-tile[aria-pressed=true]:not(.tb-wrong):not(.tb-correct) { border-color: #4387cd; background: #4387cd40; }
.tb-match-tile.tb-correct { opacity: .55; }
.tb-game-feedback { margin-top: 18px; padding: 14px 16px; min-height: 54px; border: 1px solid #4387cd80; border-radius: 12px; color: #ffffff; font-size: .9rem; line-height: 1.65; }
.tb-game-feedback:empty { border-color: transparent; }
.tb-game-feedback.tb-wrong { color: #ffffff; border-color: #ffffff99; border-style: dashed; background: #ffffff0a; }
.tb-game-feedback.tb-correct { color: #ffffff; border-color: #4387cd99; background: #4387cd14; }
.tb-game-timer { width: 90px; height: 90px; margin: 0 auto 20px; border: 4px solid #4387cd; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #fff; }
.tb-game-timer strong { font-size: 1.5rem; line-height: 1.2; }
.tb-game-timer span { font-size: .65rem; color: #bcbcbc; }
.tb-game-timer.tb-urgent { border-color: #ffffff; border-style: dashed; }
.tb-sequence-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tb-sequence-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #4387cd80; background: #00000099; border-radius: 12px; }
.tb-sequence-position { color: #4387cd; font-weight: 700; }
.tb-sequence-text { flex: 1; min-width: 0; font-size: .9rem; }
.tb-sequence-controls { display: flex; gap: 6px; }
.tb-sequence-move { width: 44px; height: 44px; border-radius: 8px; background: #4387cd26; color: #fff; border: 1px solid #4387cd80; }
.tb-sequence-move:disabled { opacity: .3; cursor: default; }
.tb-sequence-move:hover:not(:disabled) { background: #4387cd66; }
.tb-result-score { font: 800 3rem/1.1 var(--heading); color: #4387cd; margin-bottom: 6px; }
.tb-result-label { color: #bcbcbc; font-size: .8rem; }
.tb-result-stats { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 24px 0; }
.tb-result-stats strong { display: block; color: #fff; font-size: 1.5rem; }
.tb-result-stats span { font-size: .75rem; color: #bcbcbc; }
.tb-games-note { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 28px; }
.tb-no-script { padding: 16px; background: #4387cd14; color: #161616; border-radius: 12px; margin-bottom: 20px; }
[data-theme=dark] .tb-no-script { color: #fff; }
[data-theme=dark] .tb-game-card { background: #ffffff0a; border-color: #ffffff26; color: #fff; }
[data-theme=dark] .tb-card-description, [data-theme=dark] .tb-card-tags { color: #bcbcbc; }
[data-theme=dark] .tb-card-cta, [data-theme=dark] .tb-games-heading .eyebrow { color: #fff; }
[data-theme=dark] .tb-card-icon { color: #4387cd; }
/* Use the existing collapsible navigation on tablets on this page only. */
@media (min-width: 901px) and (max-width: 1439px) {
 .site-header .main-nav { height: 75px; }
 .site-header .menu-toggle { display: block; }
 .site-header .brand-logo { width: 155px; }
 .site-header .nav-links { display: none; position: absolute; top: 75px; left: 0; right: 0; background: #fff; padding: 18px 30px 24px; border-bottom: 1px solid var(--border); max-height: calc(100dvh - 75px); overflow: auto; font-size: 14px; }
 .site-header .nav-links.open { display: block; }
 .site-header .nav-links > a { display: block; padding: 14px 0; }
 .site-header .nav-links > a.active { padding: 10px 14px; margin: 2px 0; width: fit-content; }
 .site-header .nav-actions { margin-top: 14px; flex-wrap: wrap; }
 [data-theme=dark] .site-header .nav-links { background: #111; }
}
@media (max-width: 1050px) { .tb-games-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
 .tb-games-menu { grid-template-columns: 1fr; gap: 16px; }
 .tb-game-area { padding: 22px 16px; }
 .tb-game-scorebar { padding: 12px; gap: 10px; }
 .tb-game-stat strong { font-size: 1rem; }
 .tb-match-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
 .tb-match-tile { padding: 12px 8px; min-height: 92px; }
 .tb-game-prompt { font-size: 1.05rem; }
 .tb-sequence-row { gap: 8px; padding: 10px; }
 .tb-sequence-controls { flex-direction: column; }
 .tb-game-choices { gap: 10px; }
 .tb-game-choice { padding: 12px 8px; }
}
@media (prefers-reduced-motion: reduce) { .tb-game-card { transition: none; } .tb-game-card:hover { transform: none; } }