/* ============================================================ Equation Builder — Web port Tokens, layout primitives and component styles. Light/dark themed via [data-theme] on . ============================================================ */ :root, [data-theme="light"] { --color-bg: 245 241 235; --color-surface: 255 255 255; --color-surface-alt: 213 203 187; --color-strip-bg: 247 245 242; --color-fg: 36 36 36; --color-muted: 152 142 126; --color-border: 222 217 207; --color-accent: 79 101 160; --color-accent-fg: 255 255 255; --color-success: 97 142 58; --color-success-bg: 231 250 188; --color-success-border: 200 234 141; --color-danger: 206 79 80; --color-danger-bg: 255 231 229; --color-danger-border: 252 192 187; --color-warn: 160 134 47; --color-warn-bg: 248 237 201; --color-warn-border: 239 224 176; --color-star: 245 179 30; } [data-theme="dark"] { --color-bg: 36 36 36; --color-surface: 58 58 56; --color-surface-alt: 152 142 126; --color-strip-bg: 50 50 48; --color-fg: 245 241 235; --color-muted: 152 142 126; --color-border: 80 76 70; --color-accent: 99 121 180; --color-accent-fg: 255 255 255; --color-success: 145 197 99; --color-success-bg: 50 65 30; --color-success-border: 75 100 50; --color-danger: 226 107 107; --color-danger-bg: 80 45 45; --color-danger-border: 130 75 75; --color-warn: 218 187 86; --color-warn-bg: 65 55 25; --color-warn-border: 110 90 40; --color-star: 245 179 30; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; min-height: 100%; background: #ffffff; color: rgb(var(--color-fg)); font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 400; font-size: 14px; line-height: 1.4; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior: none; } body { display: block; min-height: 100dvh; padding: 0; } /* ============================================================ Page header — chrome above the game frame (logo + "Ver más juegos" + share buttons) Mobile: in-flow, narrow (matches old look). Desktop: sticky, full viewport width, larger. ============================================================ */ .page-header { background: #ffffff; } .page-header__inner { width: 100%; max-width: 800px; margin: 0 auto; padding: 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; } .page-header__brand { display: inline-flex; align-items: center; text-decoration: none; } .page-header__brand img { height: 28px; width: auto; display: block; } /* ============================================================ Page shell — main content (game frame + game-info section) ============================================================ */ .page-shell { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 12px 96px; display: flex; flex-direction: column; gap: 16px; } .page-header__hub { text-align: center; font-size: 14px; font-weight: 600; color: #3d8bcd; text-decoration: underline; text-underline-offset: 3px; transition: color 140ms; } .page-header__hub:hover { color: #da7256; } .page-header__share { display: inline-flex; align-items: center; gap: 8px; } .share-btn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; transition: opacity 120ms, transform 80ms; } .share-btn:hover { opacity: 0.85; } .share-btn:active { transform: scale(0.94); } .share-btn--whatsapp { background: #25d366; } .share-btn--facebook { background: #1877f2; } .share-btn--pinterest { background: #e60023; } /* ============================================================ Game info — descriptive content below the game frame. Primary purpose: real text for SEO indexation and first-time visitors. Kept sober so it doesn't compete with the game. ============================================================ */ .game-info { margin-top: 8px; padding: 4px 8px 0; color: #2c2c2c; line-height: 1.55; font-size: 15px; } .game-info__title { font-size: 22px; font-weight: 700; color: #1c1c1c; margin: 0 0 12px; line-height: 1.25; } .game-info__lead { font-size: 16px; margin: 0 0 20px; } .game-info__h2 { font-size: 17px; font-weight: 700; color: #1c1c1c; margin: 22px 0 8px; } .game-info__list { margin: 0 0 16px; padding-left: 22px; } .game-info__list li { margin-bottom: 6px; } .game-info__meta { margin: 24px 0 0; font-size: 13px; color: #6b6b6b; } @media (max-width: 480px) { .game-info { font-size: 14px; padding: 4px 4px 0; } .game-info__title { font-size: 19px; } .game-info__lead { font-size: 15px; } .game-info__h2 { font-size: 16px; } } /* Mobile (narrow phones): tighten header gaps and sizes so the three columns (logo + link + 3 share buttons) fit comfortably side-by-side. */ @media (max-width: 480px) { .page-header__inner { gap: 10px; padding: 10px 12px; } .page-header__brand img { height: 24px; } .page-header__hub { font-size: 13px; } .share-btn { width: 30px; height: 30px; } .page-header__share { gap: 6px; } } button { font-family: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } button:disabled { cursor: not-allowed; } a { color: inherit; text-decoration: none; } /* 800x600 game frame. Fixed height at every viewport; below 800px wide it uses 100% width. If any individual screen's content exceeds the frame height, the `.screen` scrolls internally — see below. */ #root { display: flex; flex-direction: column; width: 100%; max-width: 800px; height: 680px; background: rgb(var(--color-bg)); position: relative; margin: 0; overflow: hidden; padding: 12px; box-sizing: border-box; } @media (min-width: 400px) { #root { border-radius: 16px; } } @media (min-width: 800px) { #root { height: 600px; } /* Desktop header: sticky, full viewport width, larger sizing and spacing inspired by the EduMaterial main site. The inner wrapper bounds the content to a comfortable max width without capping the header's own background to that width. */ .page-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #ececec; } .page-header__inner { max-width: 1200px; padding: 18px 32px; gap: 32px; } .page-header__brand img { height: 48px; } .page-header__hub { font-size: 18px; } .share-btn { width: 36px; height: 36px; } .share-btn svg { width: 22px; height: 22px; } /* Shell gets a bit more breathing room from the sticky header above and from the bottom of the viewport. */ .page-shell { padding: 0 24px 96px; gap: 24px; margin-top: 24px; } } /* Confetti is contained within the game frame so the celebration stays visually tied to the play area rather than raining over the gray strip surrounding it on desktop. */ /* The mount point for the router. Canvas + toast are siblings (not inside), so they survive route changes. screen-host inherits the same flex column layout the screens expect. */ #screen-host { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; } #confetti-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 100; width: 100%; height: 100%; } /* Toast — also frame-local, so it appears at the bottom of the play area. */ #toast { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgb(var(--color-fg)); color: rgb(var(--color-bg)); font-size: 13px; font-weight: 500; padding: 10px 16px; border-radius: 999px; pointer-events: none; opacity: 0; transition: opacity 200ms, transform 200ms; z-index: 200; white-space: nowrap; } #toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ Layout primitives — Screen / Header ============================================================ */ .screen { display: flex; flex-direction: column; flex: 1; /* min-height: 0 + flex: 1 lets the screen consume exactly the frame height and lets overflow-y: auto kick in when content is taller. */ min-height: 0; width: 100%; position: relative; overflow-y: auto; animation: fade-in 220ms ease-out; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* Three-column grid: left+right take equal share of remaining space, title sits in the middle and gets only as wide as its content needs. This keeps the title optically centered regardless of what's in the side slots. */ .header { height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px; flex-shrink: 0; position: sticky; top: 0; z-index: 5; background: rgb(var(--color-bg)); } .header__side { display: flex; align-items: center; gap: 4px; min-width: 0; } .header__side--left { justify-content: flex-start; } .header__side--right { justify-content: flex-end; } .header__title { font-weight: 700; font-size: 24px; color: rgb(var(--color-fg)); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; } .header__icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: rgb(var(--color-fg)); border-radius: 8px; transition: background-color 120ms; } .header__icon-btn:hover { background: rgb(var(--color-surface) / 0.6); } /* Help icon matches the back chevron's fg color so the pair reads as a balanced set of header controls. */ .header__icon-btn--help { color: rgb(var(--color-fg)); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; border-radius: 24px; padding: 0 24px; font-size: 18px; font-weight: 600; transition: opacity 120ms, transform 80ms; user-select: none; white-space: nowrap; } .btn--full { width: 100%; } .btn--primary { background: rgb(var(--color-accent)); color: rgb(var(--color-accent-fg)); } .btn--secondary { background: #fff; color: rgb(36 36 36); } [data-theme="dark"] .btn--secondary { background: rgb(var(--color-surface)); color: rgb(var(--color-fg)); } .btn--ghost { background: transparent; color: rgb(var(--color-fg)); } .btn--danger { background: rgb(var(--color-danger-bg)); color: rgb(var(--color-danger)); } .btn:disabled { opacity: 0.5; } .btn:not(:disabled):active { transform: scale(0.97); } /* ============================================================ Home ============================================================ */ /* Home is just two centered rows now: brand block, then the navigation menu. `justify-content: center` keeps them vertically centered in the 600px frame; `align-items: center` centers them horizontally. */ .home { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 24px 16px; position: relative; gap: 48px; } .home__cog { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: rgb(var(--color-fg)); z-index: 2; } .home__brand { display: flex; flex-direction: column; align-items: center; gap: 18px; } .home__logo { width: 280px; max-width: 80%; height: auto; } .home__tagline { color: rgb(var(--color-fg)); font-size: 15px; font-weight: 700; text-align: center; } /* Menu: stacked single column on mobile (3 cards), 1×3 inline on desktop (see media query below). Width-capped so it stays visually centered instead of stretching edge-to-edge. */ .home__menu { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; max-width: 320px; } .home__card { background: rgb(var(--color-surface)); border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; text-align: left; cursor: pointer; min-height: 92px; } .home__card-title { font-weight: 600; font-size: 19px; color: rgb(var(--color-fg)); } .home__card-hint { font-size: 13px; color: rgb(var(--color-muted)); margin-top: 6px; line-height: 1.4; } /* ============================================================ Pill (difficulty badge in level header) ============================================================ */ .pill { display: inline-flex; align-items: center; justify-content: center; height: 24px; border-radius: 12px; padding: 0 12px; background: rgb(var(--color-surface-alt)); color: #fff; font-size: 12px; font-weight: 500; gap: 4px; } .pill svg { width: 12px; height: 12px; } .pill--difficulty { width: 78px; padding: 0; border: 1.5px solid; font-weight: 600; } /* Same color tokens as the level cards & practice picker, applied to the header pill shown while playing a level. */ .pill--difficulty-easy { background: rgb(var(--color-success-bg)); border-color: rgb(var(--color-success-border)); color: rgb(var(--color-success)); } .pill--difficulty-medium { background: rgb(var(--color-warn-bg)); border-color: rgb(var(--color-warn-border)); color: rgb(var(--color-warn)); } .pill--difficulty-hard { background: rgb(var(--color-danger-bg)); border-color: rgb(var(--color-danger-border)); color: rgb(var(--color-danger)); } /* ============================================================ Practice / Equation Board ============================================================ */ .practice { display: flex; flex-direction: column; flex: 1; } .difficulty-picker { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .difficulty-picker__btn { width: 78px; height: 26px; border-radius: 13px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: transparent; transition: background 140ms, color 140ms; } /* Per-difficulty tinting — same look as the level cards in the unselected state (pastel bg + colored border + colored text); the selected state inverts to a solid fill of the difficulty color with white text. */ .difficulty-picker__btn--easy { background: rgb(var(--color-success-bg)); border-color: rgb(var(--color-success-border)); color: rgb(var(--color-success)); } .difficulty-picker__btn--easy.is-selected { background: rgb(var(--color-success)); border-color: rgb(var(--color-success)); color: #fff; } .difficulty-picker__btn--medium { background: rgb(var(--color-warn-bg)); border-color: rgb(var(--color-warn-border)); color: rgb(var(--color-warn)); } .difficulty-picker__btn--medium.is-selected { background: rgb(var(--color-warn)); border-color: rgb(var(--color-warn)); color: #fff; } .difficulty-picker__btn--hard { background: rgb(var(--color-danger-bg)); border-color: rgb(var(--color-danger-border)); color: rgb(var(--color-danger)); } .difficulty-picker__btn--hard.is-selected { background: rgb(var(--color-danger)); border-color: rgb(var(--color-danger)); color: #fff; } .equation-board { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 30px; overflow-y: auto; } .equation-board__spacer { flex: 1; min-height: 8px; } .target { display: flex; flex-direction: column; align-items: center; } .target__label { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: rgb(var(--color-muted)); } .target__value { font-weight: 700; font-size: 72px; line-height: 80px; color: rgb(var(--color-fg)); margin-top: 4px; } .target__value--enter { animation: fade-in 300ms ease-out; } .expression-strip { margin-top: 16px; /* min-height + auto height lets the strip grow vertically when a long expression wraps to a second or third row of tokens. With a fixed height, wrapped content would overflow the dashed box. */ min-height: 88px; border-radius: 10px; border: 4px dashed rgb(var(--color-border)); background: rgb(var(--color-strip-bg)); padding: 8px 16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; transition: background 180ms, border-color 180ms, transform 180ms; } .expression-strip.is-ok { background: rgb(var(--color-success-bg)); border-color: rgb(var(--color-success-border)); } .expression-strip.is-error { background: rgb(var(--color-danger-bg)); border-color: rgb(var(--color-danger-border)); } .expression-strip.is-flash { animation: strip-flash 280ms ease-out; } @keyframes strip-flash { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } } .expression-strip.is-shake { animation: shake 260ms ease-in-out; } @keyframes shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-8px); } 30% { transform: translateX(8px); } 45% { transform: translateX(-6px); } 60% { transform: translateX(6px); } 80% { transform: translateX(0); } } .expression-strip__placeholder { font-size: 12px; color: rgb(var(--color-muted)); } .expression-strip__token { display: inline-block; padding: 0 5px; font-weight: 500; font-size: 32px; line-height: 36px; color: rgb(var(--color-fg)); animation: zoom-in 180ms ease-out; } .expression-strip.is-ok .expression-strip__token { color: rgb(var(--color-success)); } .expression-strip.is-error .expression-strip__token { color: rgb(var(--color-danger)); } .expression-strip[data-size="medium"] .expression-strip__token { font-size: 26px; line-height: 30px; } .expression-strip[data-size="small"] .expression-strip__token { font-size: 22px; line-height: 26px; } .expression-strip[data-size="xsmall"] .expression-strip__token { font-size: 18px; line-height: 22px; } @keyframes zoom-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .feedback-line { height: 24px; display: flex; align-items: center; justify-content: center; margin-top: 4px; font-size: 12px; font-weight: 500; } .feedback-line--ok { color: rgb(var(--color-success)); font-weight: 600; } .feedback-line--error { color: rgb(var(--color-danger)); } .tile-row { display: flex; justify-content: center; gap: 7px; margin-top: 16px; } .number-tile { width: 60px; height: 60px; border-radius: 10px; background: rgb(var(--color-surface)); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 500; color: rgb(var(--color-fg)); transition: opacity 120ms, transform 80ms; } .number-tile--enter { animation: tile-enter 320ms ease-out backwards; } @keyframes tile-enter { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .number-tile.is-used { opacity: 0.3; cursor: default; } .number-tile:not(.is-used):active { transform: scale(0.92); } .operator-btn { width: 48px; height: 48px; border-radius: 10px; background: rgb(var(--color-surface-alt)); color: #fff; font-size: 30px; line-height: 34px; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: transform 80ms; } .operator-btn:active { transform: scale(0.92); } .operator-btn--secondary { background: rgb(var(--color-surface)); color: rgb(var(--color-fg)); } .action-row { display: flex; justify-content: center; align-items: flex-start; gap: 40px; margin-bottom: 16px; } .action-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 12px; color: rgb(var(--color-muted)); font-size: 12px; font-weight: 500; transition: opacity 120ms; } .action-btn svg { width: 20px; height: 20px; } .action-btn span { margin-top: 4px; } .action-btn:disabled { opacity: 0.4; } .bottom-actions { padding: 0 30px 16px; } /* ============================================================ Post-game (shared with Level completion view) ============================================================ */ .post-game { flex: 1; display: flex; flex-direction: column; padding: 0 24px; animation: fade-in 240ms ease-out; } /* Centered variant: used when the post-game view has no header — content is vertically centered in the frame with generous gaps between blocks. */ .post-game--centered { justify-content: center; gap: 36px; } .post-game__title { font-weight: 700; font-size: 24px; text-align: center; color: rgb(var(--color-fg)); } .post-level__header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .stat-cards { display: flex; gap: 8px; } .stat-card { flex: 1; background: rgb(var(--color-surface) / 0.5); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; } .stat-card__label { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: rgb(var(--color-muted)); } .stat-card__value-row { display: flex; align-items: center; gap: 4px; } .stat-card__value { font-weight: 600; font-size: 24px; color: rgb(var(--color-fg)); } .stat-card__hint { font-size: 12px; color: rgb(var(--color-muted)); margin-top: 2px; } .post-game__actions { display: flex; flex-direction: column; gap: 12px; } /* ============================================================ Levels ============================================================ */ .levels-meta { padding: 0 20px; margin-top: 24px; } .difficulty-chip { flex: 1; border-radius: 10px; padding: 10px; border: 1px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; } .difficulty-chip__label { font-size: 13px; font-weight: 600; } .difficulty-chip__range { font-size: 12px; font-weight: 500; } .difficulty-chip--easy { background: rgb(var(--color-success-bg)); border-color: rgb(var(--color-success-border)); color: rgb(var(--color-success)); } .difficulty-chip--medium { background: rgb(var(--color-warn-bg)); border-color: rgb(var(--color-warn-border)); color: rgb(var(--color-warn)); } .difficulty-chip--hard { background: rgb(var(--color-danger-bg)); border-color: rgb(var(--color-danger-border)); color: rgb(var(--color-danger)); } .levels-grid-wrapper { flex: 1; overflow-y: auto; padding: 16px 0 32px; display: flex; justify-content: center; } .levels-grid { display: grid; grid-template-columns: repeat(4, 60px); gap: 20px; } .level-tile { width: 60px; height: 60px; border-radius: 10px; background: rgb(var(--color-surface)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgb(var(--color-fg)); font-size: 24px; font-weight: 500; line-height: 26px; } .level-tile.is-active { background: rgb(var(--color-accent)); color: #fff; } .level-tile.is-locked { cursor: not-allowed; color: rgb(var(--color-muted)); } .level-tile__stars { display: flex; gap: 2px; margin-top: 4px; } .level-tile__stars svg { width: 9px; height: 9px; } /* ============================================================ Stats ============================================================ */ .stats-section { padding: 0 20px; margin-top: 32px; } .stats-section--first { margin-top: 16px; } .stats-section__title { font-weight: 700; font-size: 16px; color: rgb(var(--color-muted)); margin: 0 0 8px; } /* Niveles stat row: mobile keeps 2-up by wrapping the 3rd card to a full row of its own; desktop promotes all 3 into a single side-by-side row (see media query below). */ .stat-cards--levels { flex-wrap: wrap; } .stat-cards--levels > .stat-card:nth-child(3) { flex-basis: 100%; } .stars-distribution { background: rgb(var(--color-surface) / 0.5); border-radius: 10px; padding: 16px; margin-top: 12px; } .stars-distribution__title { margin-bottom: 12px; } .stars-distribution__row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .stars-distribution__row:last-child { margin-bottom: 0; } .stars-distribution__label { width: 36px; display: flex; align-items: center; gap: 2px; font-size: 11px; color: rgb(var(--color-muted)); } .stars-distribution__label svg { width: 10px; height: 10px; } .stars-distribution__bar { flex: 1; height: 10px; border-radius: 5px; background: rgb(var(--color-border)); overflow: hidden; } .stars-distribution__fill { height: 100%; background: rgb(var(--color-star)); border-radius: 5px; transition: width 280ms ease-out; } .stars-distribution__count { width: 28px; text-align: right; font-size: 12px; font-weight: 500; color: rgb(var(--color-fg)); } .empty-stats { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 32px; text-align: center; gap: 12px; } .empty-stats__title { font-weight: 700; font-size: 20px; color: rgb(var(--color-fg)); } .empty-stats__message { font-size: 14px; color: rgb(var(--color-muted)); margin-bottom: 16px; } /* ============================================================ Settings ============================================================ */ .settings-list { padding: 16px 20px 32px; display: flex; flex-direction: column; gap: 24px; } .settings-section__label { font-weight: 700; font-size: 16px; color: rgb(var(--color-muted)); margin: 0 0 8px; } .segmented { background: rgb(var(--color-surface) / 0.5); border-radius: 10px; padding: 4px; display: flex; gap: 4px; } .segmented__btn { flex: 1; padding: 8px 4px; border-radius: 6px; font-size: 14px; font-weight: 500; color: rgb(var(--color-fg)); text-align: center; } .segmented__btn.is-selected { background: rgb(var(--color-surface-alt)); color: #fff; } .settings-card { background: rgb(var(--color-surface) / 0.5); border-radius: 10px; overflow: hidden; } .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 16px; color: rgb(var(--color-fg)); } .settings-row + .settings-row { border-top: 1px solid rgb(var(--color-border)); } .settings-hint { font-size: 11px; color: rgb(var(--color-muted)); margin-top: 8px; line-height: 1.4; } .settings-action { background: rgb(var(--color-surface) / 0.5); border-radius: 10px; padding: 12px 16px; text-align: center; font-size: 14px; font-weight: 600; color: rgb(var(--color-fg)); width: 100%; } .settings-action--danger { background: rgb(var(--color-danger)); color: #fff; } /* iOS-style toggle */ .toggle { position: relative; width: 51px; height: 31px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle__slider { position: absolute; inset: 0; background: rgb(var(--color-surface-alt)); border-radius: 999px; transition: background 180ms; cursor: pointer; } .toggle__slider::before { content: ""; position: absolute; height: 27px; width: 27px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: transform 180ms; box-shadow: 0 2px 4px rgb(0 0 0 / 0.2); } .toggle input:checked + .toggle__slider { background: rgb(var(--color-accent)); } .toggle input:checked + .toggle__slider::before { transform: translateX(20px); } /* ============================================================ Rules example (used by the in-header "¿Cómo jugar?" modal) ============================================================ */ .rules-example { background: rgb(var(--color-surface) / 0.5); border-radius: 10px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; } .rules-example__small-label { font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: rgb(var(--color-muted)); margin-top: 20px; } .rules-example__small-label:first-child { margin-top: 0; } .rules-example__target { font-weight: 700; font-size: 48px; color: rgb(var(--color-fg)); margin-top: 4px; } .rules-example__tiles { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .rules-example__tile { width: 48px; height: 48px; border-radius: 10px; background: rgb(var(--color-surface)); color: rgb(var(--color-fg)); font-weight: 500; font-size: 20px; display: flex; align-items: center; justify-content: center; } .rules-example__tile.is-op { background: rgb(var(--color-surface-alt)); color: #fff; } .rules-example__equation { font-weight: 600; font-size: 16px; color: rgb(var(--color-fg)); margin-top: 16px; } .ready-animation { width: 240px; height: 240px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .ready-animation__circle { width: 200px; height: 200px; border-radius: 50%; background: rgb(var(--color-accent)); display: flex; align-items: center; justify-content: center; color: rgb(var(--color-accent-fg)); animation: pop-in 600ms cubic-bezier(0.34, 1.56, 0.64, 1); } .ready-animation__circle svg { width: 96px; height: 96px; } @keyframes pop-in { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.1); } to { transform: scale(1); opacity: 1; } } /* ============================================================ Levels detail — solved view ============================================================ */ .post-level__stars { display: flex; gap: 10px; justify-content: center; } .post-level__stars svg { width: 42px; height: 42px; } .post-level__stars-record { font-weight: 600; font-size: 12px; color: rgb(var(--color-success)); text-align: center; opacity: 0; animation: fade-in 220ms ease-out 500ms forwards; } /* ============================================================ Modal (confirm) ============================================================ */ .modal-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.5); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 24px; animation: fade-in 160ms ease-out; } .modal { background: rgb(var(--color-bg)); border-radius: 16px; padding: 24px; width: 100%; max-width: 360px; animation: pop-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* Wider modal variant for the how-to-play info modal, which embeds the RulesExample illustration. Title + body + example + close button stack. */ .modal--howto { max-width: 460px; max-height: calc(100dvh - 48px); overflow-y: auto; } .modal--howto .modal__message { margin-bottom: 16px; } .modal--howto .rules-example { margin-bottom: 20px; } .modal__title { font-weight: 700; font-size: 18px; color: rgb(var(--color-fg)); margin: 0 0 8px; } .modal__message { font-size: 14px; color: rgb(var(--color-muted)); line-height: 1.5; margin: 0 0 20px; } .modal__actions { display: flex; gap: 8px; justify-content: flex-end; } .modal__btn { padding: 10px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; } .modal__btn--cancel { color: rgb(var(--color-muted)); } .modal__btn--confirm { background: rgb(var(--color-accent)); color: rgb(var(--color-accent-fg)); } .modal__btn--destructive { background: rgb(var(--color-danger)); color: #fff; } /* ============================================================ Helpers ============================================================ */ .text-center { text-align: center; } .flex-spacer { flex: 1; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-10 { margin-top: 40px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .hidden { display: none !important; } .dev-hint { font-size: 11px; color: rgb(var(--color-muted)); text-align: center; margin-top: 12px; } /* ============================================================ Responsive The frame is always 800×600 (or 100% width × 600px tall on viewports narrower than 800px). What changes per breakpoint is how individual screens lay themselves out inside that frame: • <800px (mobile-ish): screens stack vertically, single column. • ≥800px (frame hits its max width): EquationBoard and Home reflow into a two-column horizontal layout that fits the 800×600 box. The EquationBoard's left/right wrappers and the Home's hero wrapper use `display: contents` by default — they're invisible to layout, so the mobile single-column flow renders exactly as it would without the wrappers. The desktop media query promotes them into real flex columns; no JS branching needed. ============================================================ */ .eb-info-col, .eb-controls-col { display: contents; } @media (min-width: 800px) { /* Hide the flex-grow spacers — on desktop the grid handles alignment. */ .equation-board__spacer, .flex-spacer { display: none; } /* ----- EquationBoard: two columns, tuned to fit in 800×600 ----- `minmax(0, 1fr)` (instead of plain `1fr`) is the key part: a `1fr` track has an automatic minimum of `min-content`, so a long expression would expand the left column past its 1fr share and push the right column out of the frame. Using `minmax(0, 1fr)` clamps the track's minimum to zero, which combined with `min-width: 0` on each column forces both tracks to share the 800px frame evenly no matter how long the expression gets. The strip's `flex-wrap: wrap` then kicks in to break tokens onto a second/third line. */ .equation-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 12px; padding: 16px 32px 24px; align-items: center; /* flex: 1 (not `none`) so the grid container fills boardWrap's full width — otherwise it sizes to content (~747px) and gets left-aligned, making the two columns feel off-center within the 800px frame. */ flex: 1; overflow: hidden; } .eb-info-col { display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; /* Prevent any internal content from expanding the column beyond its grid track allocation — anything that doesn't fit gets clipped by the parent's overflow rule (well above the visible content under normal conditions). */ max-width: 100%; } .eb-controls-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 100%; } /* Reset the inline top-margins we kept for mobile spacing. */ .eb-tiles, .eb-operators { margin-top: 0 !important; } /* Sized to fill the left column nicely without crowding the 600px tall frame. Mobile keeps the bigger 80px hero. */ .target__value { font-size: 72px; line-height: 78px; } .expression-strip { margin-top: 0; min-height: 88px; /* Hard cap on the strip width so a long expression wraps into 2–3 lines like the mobile app does. The grid's minmax(0, 1fr) should already constrain the column, but this is belt-and-suspenders: even if the column ends up wider, the strip itself stays narrow and the tokens have to wrap. `align-self: center` overrides the column's `align-items: stretch` so the strip is centered, not full-width. */ width: 100%; max-width: 320px; align-self: center; box-sizing: border-box; } /* Bottom actions live inside the right column; drop the mobile padding. */ .bottom-actions { padding: 0; margin-top: 4px; } .action-row { margin-bottom: 12px; } /* ----- Home: same two centered rows, with the menu cards inline ----- */ .home { padding: 32px; gap: 48px; } .home__tagline { font-size: 20px; } .home__logo { width: 340px; max-width: 88%; } .home__menu { grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 700px; } .home__card { padding: 20px 22px; min-height: 110px; } .home__card-title { font-size: 21px; } .home__card-hint { font-size: 14px; margin-top: 8px; } .home__cog { top: 16px; right: 16px; } /* On desktop the 800px-wide frame fits 10 columns of 60px tiles with a tighter gap, so the full 50-level grid is visible without scrolling (5 rows). Mobile keeps its 4-col layout and lets the wrapper scroll. */ .levels-grid { grid-template-columns: repeat(10, 60px); row-gap: 12px; column-gap: 12px; } /* Flatten the two meta rows (2 stat cards + 3 difficulty chips) into a single 5-item flex row. The inner `.stat-cards` wrappers become `display: contents` so their children render as direct flex items of `.levels-meta`. The chips and cards keep their `flex: 1` so the 5 items share the row evenly. Saves ~50px of vertical space on the screen. */ .levels-meta { display: flex; flex-direction: row; align-items: stretch; gap: 8px; } .levels-meta > .stat-cards { display: contents; } /* Stats > Niveles: the 3 cards share a single row instead of wrapping the third one to its own line as on mobile. */ .stat-cards--levels { flex-wrap: nowrap; } .stat-cards--levels > .stat-card:nth-child(3) { flex-basis: 0; } }