/* ═══════════════════════════════════════════════════════════════════════════ Toybox — design system for the LexiQuest / Word of the Day reskin Clean & fun, Nintendo-calm. Additive: nothing here is applied until a screen opts in by using .tb-* classes, so it's safe to ship ahead of the screen work. Signature: chunky "pressable" buttons/tiles with a solid bottom ledge. Prefix: every class is `tb-` to avoid colliding with the existing arcade CSS. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tokens ─────────────────────────────────────────────────────────────── */ :root { --tb-bg: #EBEEF5; --tb-surface: #FFFFFF; --tb-surface-2: #F4F6FB; --tb-surface-3: #EAEEF6; --tb-ink: #1B2233; --tb-ink-soft: #5A6479; --tb-ink-faint: #8B93A5; --tb-line: #E1E6F0; --tb-line-strong: #D2D9E6; --tb-primary: #FF4E64; --tb-primary-press: #D8394E; --tb-primary-soft: #FFE6EA; --tb-blue: #3D7DFF; --tb-blue-press: #2A62D6; --tb-blue-soft: #E3ECFF; --tb-yellow: #FFC93C; --tb-yellow-press: #E5AC12; --tb-green: #2FBF71; --tb-green-press: #23A25E; --tb-amber: #FFB020; --tb-amber-press: #E5960A; --tb-absent: #AEB6C4; --tb-absent-press: #949DAD; --tb-radius-lg: 28px; --tb-radius: 20px; --tb-radius-sm: 14px; --tb-shadow-card: 0 2px 0 var(--tb-line-strong), 0 14px 30px -18px rgba(27,34,51,.28); --tb-shadow-float: 0 20px 45px -20px rgba(27,34,51,.45); /* Rounded, friendly type. Falls back to system rounded stack if webfont fails. */ --tb-font-ui: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif; --tb-font-display: "Baloo 2", "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :root { --tb-bg: #10131C; --tb-surface: #1A1F2D; --tb-surface-2: #212736; --tb-surface-3: #2A3143; --tb-ink: #F2F5FB; --tb-ink-soft: #A9B2C5; --tb-ink-faint: #7C8598; --tb-line: #2C3346; --tb-line-strong: #363E54; --tb-primary-soft: #3A2530; --tb-blue-soft: #23304C; --tb-shadow-card: 0 2px 0 var(--tb-line-strong), 0 16px 34px -18px rgba(0,0,0,.6); --tb-shadow-float: 0 24px 50px -20px rgba(0,0,0,.7); } } /* Explicit theme overrides win over the media query in both directions. */ :root[data-theme="dark"] { --tb-bg: #10131C; --tb-surface: #1A1F2D; --tb-surface-2: #212736; --tb-surface-3: #2A3143; --tb-ink: #F2F5FB; --tb-ink-soft: #A9B2C5; --tb-ink-faint: #7C8598; --tb-line: #2C3346; --tb-line-strong: #363E54; --tb-primary-soft: #3A2530; --tb-blue-soft: #23304C; --tb-shadow-card: 0 2px 0 var(--tb-line-strong), 0 16px 34px -18px rgba(0,0,0,.6); --tb-shadow-float: 0 24px 50px -20px rgba(0,0,0,.7); } :root[data-theme="light"] { --tb-bg: #EBEEF5; --tb-surface: #FFFFFF; --tb-surface-2: #F4F6FB; --tb-surface-3: #EAEEF6; --tb-ink: #1B2233; --tb-ink-soft: #5A6479; --tb-ink-faint: #8B93A5; --tb-line: #E1E6F0; --tb-line-strong: #D2D9E6; --tb-primary-soft: #FFE6EA; --tb-blue-soft: #E3ECFF; --tb-shadow-card: 0 2px 0 var(--tb-line-strong), 0 14px 30px -18px rgba(27,34,51,.28); --tb-shadow-float: 0 20px 45px -20px rgba(27,34,51,.45); } /* Tell the browser which theme it's painting: UA-rendered surfaces (scrollbars, overscroll canvas, form widgets) otherwise stay LIGHT in dark mode and can flash as a white strip at the viewport edge (e.g. while typing into the hidden mobile-keyboard input). Also paint the root so any overscroll/gap area matches the theme. */ :root { color-scheme: light; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } html { background: var(--tb-bg); } /* ── App shell (opt-in via .tb-app on during a screen migration) ──── */ .tb-app { background: var(--tb-bg); color: var(--tb-ink); font-family: var(--tb-font-ui); -webkit-font-smoothing: antialiased; } /* The router stamps `screen-` on . Converted screens get the light Toybox ground (overrides the legacy dark body gradient) while unconverted screens keep their arcade background. */ body.screen-home, body.screen-game, body.screen-leaderboard, body.screen-how-to-play { background: var(--tb-bg) !important; color: var(--tb-ink); font-family: var(--tb-font-ui); -webkit-font-smoothing: antialiased; } /* Type helpers */ .tb-display { font-family: var(--tb-font-display); font-weight: 800; letter-spacing: -.01em; } .tb-label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-ink-faint); } .tb-num { font-variant-numeric: tabular-nums; } /* ── Chunky pressable button — the signature element ─────────────────────── */ .tb-btn { font-family: var(--tb-font-ui); font-weight: 800; font-size: 15px; line-height: 1; border: none; border-radius: 15px; padding: 13px 20px; color: #fff; cursor: pointer; background: var(--tb-primary); box-shadow: 0 4px 0 var(--tb-primary-press); transition: transform .06s ease, box-shadow .06s ease, filter .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .tb-btn:hover { filter: brightness(1.04); } .tb-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tb-primary-press); } .tb-btn:focus-visible { outline: 3px solid var(--tb-blue); outline-offset: 2px; } .tb-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--tb-primary-press); } .tb-btn--blue { background: var(--tb-blue); box-shadow: 0 4px 0 var(--tb-blue-press); } .tb-btn--blue:active { box-shadow: 0 1px 0 var(--tb-blue-press); } .tb-btn--green { background: var(--tb-green); box-shadow: 0 4px 0 var(--tb-green-press); } .tb-btn--green:active { box-shadow: 0 1px 0 var(--tb-green-press); } .tb-btn--ghost { background: var(--tb-surface-2); color: var(--tb-ink); box-shadow: 0 4px 0 var(--tb-line-strong); } .tb-btn--ghost:active { box-shadow: 0 1px 0 var(--tb-line-strong); } .tb-btn--sm { padding: 9px 14px; font-size: 13px; border-radius: 12px; } .tb-btn--lg { padding: 16px 26px; font-size: 18px; border-radius: 18px; } /* ── Surfaces ────────────────────────────────────────────────────────────── */ .tb-card { background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: var(--tb-radius); box-shadow: var(--tb-shadow-card); } .tb-card--pad { padding: 18px; } /* Locked achievement badge — blends into the page ground, outline only, faded, so unlocked (raised white) badges stand out. Beats .tb-card (higher specificity). */ [data-achievement].ach-locked { background: var(--tb-bg); border-color: var(--tb-line-strong); box-shadow: none; opacity: 0.65; } /* ── Pills / chips ───────────────────────────────────────────────────────── */ .tb-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--tb-surface-2); color: var(--tb-ink-soft); } .tb-pill--hot { background: var(--tb-primary-soft); color: var(--tb-primary); } .tb-pill--blue { background: var(--tb-blue-soft); color: var(--tb-blue); } .tb-pill--clean { background: var(--tb-green); color: #fff; } /* ── Avatar ──────────────────────────────────────────────────────────────── */ .tb-avatar { position: relative; width: 40px; height: 40px; border-radius: 999px; border: 2px solid var(--tb-surface); box-shadow: 0 0 0 2px var(--tb-line-strong); background: linear-gradient(135deg, var(--tb-blue), var(--tb-primary)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px; overflow: hidden; } /* Absolute fill so the image covers the circle regardless of aspect ratio — in a place-items:center grid, height:100% would collapse to auto and a portrait image would overflow the top instead of centre-cropping. */ .tb-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ── Stat tile ───────────────────────────────────────────────────────────── */ .tb-stat { background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: var(--tb-radius-sm); padding: 16px 10px; text-align: center; box-shadow: 0 2px 0 var(--tb-line-strong); } .tb-stat__ic { font-size: 18px; } .tb-stat__badge { width: 40px; height: 40px; border-radius: 999px; margin: 0 auto 8px; display: grid; place-items: center; font-size: 17px; } .tb-stat__n { font-size: 23px; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--tb-ink); } .tb-stat__l { font-size: 11px; color: var(--tb-ink-faint); font-weight: 700; } /* ── Play hero button ────────────────────────────────────────────────────── */ .tb-play { position: relative; width: 100%; border: none; cursor: pointer; font-family: var(--tb-font-ui); background: linear-gradient(135deg, #FF6478, var(--tb-primary)); color: #fff; border-radius: 24px; padding: 22px; text-align: left; box-shadow: 0 6px 0 var(--tb-primary-press), var(--tb-shadow-card); transition: transform .06s ease, box-shadow .06s ease; display: flex; align-items: center; gap: 18px; } .tb-play:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--tb-primary-press); } .tb-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .tb-play__ic { width: 58px; height: 58px; border-radius: 999px; background: rgba(255,255,255,.22); display: grid; place-items: center; flex-shrink: 0; } .tb-play__ic::after { content: ""; width: 0; height: 0; margin-left: 4px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; } .tb-play__title { font-size: 26px; font-weight: 900; line-height: 1; } .tb-play__sub { font-size: 13.5px; opacity: .92; margin-top: 6px; font-weight: 600; } /* ── Segmented daily progress ────────────────────────────────────────────── */ .tb-seg { display: flex; gap: 6px; } .tb-seg > i { flex: 1; height: 9px; border-radius: 999px; background: var(--tb-surface-3); display: block; } .tb-seg > i.is-win { background: var(--tb-green); } .tb-seg > i.is-now { background: linear-gradient(90deg, var(--tb-blue), var(--tb-primary)); } .tb-seg > i.is-loss { background: var(--tb-absent); } /* ── Game tiles ──────────────────────────────────────────────────────────── */ .tb-tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 900; font-size: 22px; text-transform: uppercase; background: var(--tb-surface); border: 2px solid var(--tb-line-strong); color: var(--tb-ink); font-family: var(--tb-font-display); } @media (min-width: 640px) { .tb-tile { width: 54px; height: 54px; border-radius: 13px; font-size: 26px; } } .tb-tile.is-correct { background: var(--tb-green); border-color: var(--tb-green); color: #fff; box-shadow: 0 3px 0 var(--tb-green-press); } .tb-tile.is-present { background: var(--tb-amber); border-color: var(--tb-amber); color: #fff; box-shadow: 0 3px 0 var(--tb-amber-press); } .tb-tile.is-absent { background: var(--tb-absent); border-color: var(--tb-absent); color: #fff; box-shadow: 0 3px 0 var(--tb-absent-press); } .tb-tile.is-filled { border-color: var(--tb-blue); } .tb-tile.is-cursor { border-color: var(--tb-blue); box-shadow: 0 0 0 3px var(--tb-blue-soft); } /* Accessibility: a shape mark backs up each colour (toggle with .tb-tiles--marks) */ .tb-tiles--marks .tb-tile.is-correct::after, .tb-tiles--marks .tb-tile.is-present::after, .tb-tiles--marks .tb-tile.is-absent::after { position: absolute; top: 3px; right: 5px; font-size: 11px; opacity: .85; font-family: var(--tb-font-ui); } .tb-tiles--marks .tb-tile { position: relative; } .tb-tiles--marks .tb-tile.is-correct::after { content: "✓"; } .tb-tiles--marks .tb-tile.is-present::after { content: "◐"; } .tb-tiles--marks .tb-tile.is-absent::after { content: "×"; } /* ── Keyboard keys ───────────────────────────────────────────────────────── */ .tb-key { min-width: 30px; height: 46px; padding: 0 7px; border-radius: 10px; border: 1px solid var(--tb-line); background: var(--tb-surface); color: var(--tb-ink); font-family: var(--tb-font-ui); font-weight: 800; font-size: 15px; box-shadow: 0 3px 0 var(--tb-line-strong); cursor: pointer; transition: transform .05s ease, box-shadow .05s ease; } .tb-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tb-line-strong); } .tb-key.is-correct { background: var(--tb-green); color: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--tb-green-press); } .tb-key.is-present { background: var(--tb-amber); color: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--tb-amber-press); } .tb-key.is-absent { background: var(--tb-absent); color: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--tb-absent-press); } .tb-key--wide { min-width: 52px; font-size: 13px; } .tb-key--enter { background: var(--tb-blue); color: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--tb-blue-press); } /* ── Leaderboard row ─────────────────────────────────────────────────────── */ .tb-lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; } .tb-lb-row.is-me { background: var(--tb-primary-soft); } .tb-lb-row__rank { width: 24px; font-weight: 900; color: var(--tb-ink-faint); text-align: center; font-variant-numeric: tabular-nums; } .tb-lb-row__rank.is-gold { color: var(--tb-yellow-press); } .tb-lb-row__name { flex: 1; font-weight: 800; font-size: 15px; color: var(--tb-ink); } .tb-lb-row__name small { color: var(--tb-ink-faint); font-weight: 700; } .tb-lb-row__score { font-weight: 900; color: var(--tb-primary); font-variant-numeric: tabular-nums; } /* ── Leaderboard champion spotlight (#1) ─────────────────────────────────── */ .tb-champ { position: relative; border-radius: 22px; padding: 20px; margin-bottom: 12px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--tb-yellow) 22%, var(--tb-surface)), var(--tb-surface)); border: 1px solid var(--tb-yellow); box-shadow: 0 3px 0 var(--tb-yellow-press), var(--tb-shadow-float); } .tb-champ__crown { position: absolute; top: -6px; right: 22px; font-size: 30px; transform: rotate(12deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); } .tb-champ__ribbon { display: inline-flex; align-items: center; gap: 7px; background: var(--tb-yellow); color: #4a3a00; font-weight: 900; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; box-shadow: 0 2px 0 var(--tb-yellow-press); } .tb-champ__top { display: flex; align-items: center; gap: 16px; margin-top: 14px; } .tb-champ__av { position: relative; width: 74px; height: 74px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 30px; flex-shrink: 0; overflow: hidden; font-family: var(--tb-font-display); box-shadow: 0 0 0 4px var(--tb-surface), 0 0 0 7px var(--tb-yellow); } .tb-champ__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .tb-champ__name { font-family: var(--tb-font-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--tb-ink); } .tb-champ__sub { font-size: 13px; color: var(--tb-ink-soft); font-weight: 700; margin-top: 4px; } .tb-champ__score { margin-left: auto; text-align: right; } .tb-champ__score .v { font-family: var(--tb-font-display); font-weight: 800; font-size: 34px; color: var(--tb-yellow-press); font-variant-numeric: tabular-nums; line-height: 1; } .tb-champ__score .l { font-size: 10px; color: var(--tb-ink-faint); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .tb-champ__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; } .tb-champ__stat { background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: 13px; padding: 10px 6px; text-align: center; } .tb-champ__stat .i { font-size: 15px; } .tb-champ__stat .v { font-family: var(--tb-font-display); font-weight: 800; font-size: 16px; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--tb-ink); } .tb-champ__stat .l { font-size: 10px; color: var(--tb-ink-faint); font-weight: 700; } .tb-champ__why { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .tb-champ__why span { background: var(--tb-surface); border: 1px solid var(--tb-line); border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; color: var(--tb-ink); } .tb-champ__why span i { color: var(--tb-yellow-press); font-style: normal; } @media (max-width: 520px) { .tb-champ__stats { grid-template-columns: repeat(2, 1fr); } .tb-champ__score .v { font-size: 26px; } .tb-champ__name { font-size: 22px; } } /* ── Segmented tabs ──────────────────────────────────────────────────────── */ .tb-tabs { display: inline-flex; background: var(--tb-surface-2); border-radius: 999px; padding: 4px; gap: 2px; } .tb-tabs button { border: none; background: transparent; font-family: var(--tb-font-ui); font-weight: 800; font-size: 13px; color: var(--tb-ink-soft); padding: 7px 14px; border-radius: 999px; cursor: pointer; } .tb-tabs button.is-active { background: var(--tb-surface); color: var(--tb-ink); box-shadow: 0 2px 6px -2px rgba(0,0,0,.2); } /* ── Form controls ───────────────────────────────────────────────────────── */ .tb-input { font-family: var(--tb-font-ui); font-weight: 700; font-size: 14px; color: var(--tb-ink); background: var(--tb-surface); border: 1px solid var(--tb-line-strong); border-radius: 12px; padding: 9px 13px; } .tb-input::placeholder { color: var(--tb-ink-faint); font-weight: 600; } .tb-input:focus-visible { outline: 3px solid var(--tb-blue); outline-offset: 1px; border-color: var(--tb-blue); } .tb-select { font-family: var(--tb-font-ui); font-weight: 800; font-size: 13px; color: var(--tb-ink); background: var(--tb-surface-2); border: 1px solid var(--tb-line-strong); border-radius: 12px; padding: 9px 12px; cursor: pointer; } .tb-select:focus-visible { outline: 3px solid var(--tb-blue); outline-offset: 1px; } /* ── Tooltips (any element with a data-tooltip attribute) ────────────────── */ [data-tooltip] { position: relative; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%) translateY(4px); background: var(--tb-ink); color: var(--tb-surface); font-family: var(--tb-font-ui); font-weight: 700; font-size: 12px; line-height: 1.35; padding: 8px 11px; border-radius: 10px; width: max-content; max-width: 200px; text-align: center; text-transform: none; letter-spacing: 0; opacity: 0; pointer-events: none; z-index: 70; box-shadow: var(--tb-shadow-float); transition: opacity .15s ease, transform .15s ease; } [data-tooltip]::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--tb-ink); opacity: 0; pointer-events: none; z-index: 70; transition: opacity .15s ease; } [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } [data-tooltip]:hover::before, [data-tooltip]:focus-visible::before { opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-tooltip]::after, [data-tooltip]::before { transition: none; } } @media (prefers-reduced-motion: reduce) { .tb-btn, .tb-play, .tb-key { transition: none; } }