/* --------------------------------------------------------------------------- Design tokens. Light is the default (:root); the other palettes key off a data-theme attribute set on by the inline head script + app.js. Each theme is self-contained so painting the page is just a var swap. --------------------------------------------------------------------------- */ :root, :root[data-theme='light'] { --bg: #eeeff1; --panel: #ffffff; --panel-2: #f1f3f5; --panel-3: #eef0f3; --text: #1b1d22; --muted: #717784; --accent: #6d5ef0; --accent-2: #8b7cff; --accent-text: #ffffff; --border: #e6e8ec; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -18px rgba(16, 24, 40, 0.22); --over: #e5484d; --match: #16a34a; --cell-empty: #eceef1; --font-head: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; } :root[data-theme='dark'] { --bg: radial-gradient(1100px 620px at 80% -14%, #202533, transparent), #14151a; --panel: #1c1e26; --panel-2: #23262f; --panel-3: #2a2e39; --text: #e9eaee; --muted: #969cab; --accent: #2dd4bf; --accent-2: #5ee0d0; --accent-text: #06231f; --border: #2c303b; --shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.65); --over: #ff6b6b; --match: #4ade80; --cell-empty: #2a2e39; --font-head: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; } :root[data-theme='sage'] { --bg: #f5f6f4; --panel: #ffffff; --panel-2: #eef1ec; --panel-3: #e7ebe5; --text: #1f2420; --muted: #6f766c; --accent: #1f9d62; --accent-2: #2bb877; --accent-text: #ffffff; --border: #e3e7df; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -18px rgba(20, 40, 28, 0.2); --over: #e5484d; --match: #16a34a; --cell-empty: #e7ebe5; --font-head: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; } :root[data-theme='rose'] { --bg: #faf5f6; --panel: #ffffff; --panel-2: #f6edf0; --panel-3: #f0e4e8; --text: #241a1f; --muted: #7c6c73; --accent: #d6336c; --accent-2: #e85a8b; --accent-text: #ffffff; --border: #eedde3; --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 14px 30px -18px rgba(40, 20, 30, 0.2); --over: #e5484d; --match: #16a34a; --cell-empty: #f0e4e8; --font-head: 'Plus Jakarta Sans', system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; padding: 0 0 86px; font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ---- Header ---- */ .topbar { max-width: 1440px; margin: 0 auto; padding: 26px 20px 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .brand h1 { margin: 0; font: 800 1.7rem/1 var(--font-head); letter-spacing: -0.01em; } .tagline { margin: 7px 0 0; color: var(--muted); font: 600 0.92rem/1.35 var(--font-body); max-width: 48ch; } .theme-switch { display: inline-flex; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 5px; box-shadow: var(--shadow); } .theme-switch button { border: none; background: transparent; color: var(--muted); font: 800 0.8rem/1 var(--font-body); padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: all 0.15s; } .theme-switch button:hover { color: var(--text); } .theme-switch button.active { background: var(--accent); color: var(--accent-text); } /* ---- Layout ---- */ .layout { display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; gap: 18px; align-items: start; max-width: 1440px; margin: 0 auto; padding: 18px 20px; } @media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); } } .col-center, .col-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow); } .panel h2 { margin: 0 0 12px; font: 800 0.72rem/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .control-group { margin-bottom: 22px; } .control-group:last-child { margin-bottom: 0; } /* ---- Inputs ---- */ .grid-dims { display: flex; gap: 10px; margin-bottom: 10px; } .grid-dims label, .field-label { flex: 1; display: flex; flex-direction: column; gap: 6px; font: 800 0.68rem/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); } .field-label { margin-top: 12px; } .grid-dims input, .field-label input { width: 100%; background: var(--panel-3); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 9px 10px; font: 700 1rem/1 var(--font-body); } /* ---- Buttons ---- */ .btn { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 11px; padding: 11px 12px; font: 700 0.9rem/1 var(--font-body); cursor: pointer; margin-top: 8px; transition: border-color 0.15s, filter 0.15s, transform 0.05s; } .btn:first-of-type { margin-top: 0; } .btn:hover { border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 800; } .btn-primary:hover { border-color: transparent; filter: brightness(1.06); } .btn-wide { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; font-weight: 800; } /* ---- Shape buttons ---- */ .shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .shape-btn { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 6px; font: 700 0.82rem/1 var(--font-body); cursor: pointer; transition: border-color 0.15s; } .shape-btn:hover { border-color: var(--accent); } .shape-btn.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--panel-3); } /* ---- Palette ---- */ .palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .swatch { width: 42px; height: 42px; border-radius: 11px; border: 2px solid var(--border); cursor: pointer; transition: transform 0.08s; } .swatch:hover { transform: scale(1.08); } .swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .swatch.eraser { background: repeating-conic-gradient(var(--muted) 0% 25%, var(--panel-2) 0% 50%) 50% / 14px 14px; } .hint { color: var(--muted); font: 500 0.76rem/1.45 var(--font-body); margin: 8px 0 0; } .hint.warn { color: var(--over); font-weight: 600; } /* ---- Grid stage ---- */ .stage { display: flex; justify-content: center; align-items: flex-start; overflow: auto; min-height: 360px; } .grid { display: grid; gap: 3px; background: var(--border); padding: 6px; border-radius: 12px; width: 100%; user-select: none; touch-action: none; } .cell { aspect-ratio: 1 / 1; background: var(--cell-empty); border-radius: 50%; cursor: crosshair; transition: transform 0.05s; } .cell:hover { transform: scale(1.12); z-index: 1; } .cell.inactive { background: transparent; cursor: default; opacity: 0.1; pointer-events: none; } .cell.inactive:hover { transform: none; } /* ---- Prep list ---- */ .tally .total { margin: 0 0 12px; font: 600 0.95rem/1.3 var(--font-body); } .tally .total strong { font-weight: 800; } .tally-list { list-style: none; padding: 0; margin: 0; } .tally-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); } .tally-list li:last-child { border-bottom: none; } .tally-chip { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; } .tally-name { flex: 1; font: 600 0.92rem/1.2 var(--font-body); } .tally-num { font: 800 0.95rem/1 var(--font-body); font-variant-numeric: tabular-nums; } /* ---- Liquor panel ---- */ .slider-label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 6px; } .slider-top { display: flex; justify-content: space-between; align-items: baseline; font: 800 0.72rem/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); } #strengthReadout { color: var(--accent); font-weight: 800; text-transform: none; letter-spacing: 0; } .slider-label input[type='range'] { width: 100%; accent-color: var(--accent); cursor: pointer; } .slider-ends { display: flex; justify-content: space-between; font: 600 0.7rem/1 var(--font-body); color: var(--muted); } .liquor-list { list-style: none; padding: 0; margin: 14px 0 12px; } .liquor-list li { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; column-gap: 10px; row-gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--border); } .liquor-list li:last-child { border-bottom: none; } .liquor-icon { text-align: center; font-size: 1.05rem; } .liquor-name { font: 600 0.92rem/1.2 var(--font-body); } .liquor-val { font: 800 1.05rem/1 var(--font-body); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .liquor-sub { grid-column: 2 / -1; color: var(--muted); font: 500 0.76rem/1.4 var(--font-body); } .flavor-breakdown { grid-column: 2 / -1; margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; } .flavor-breakdown li { display: flex; align-items: center; gap: 7px; border: none; padding: 0; font: 500 0.78rem/1.3 var(--font-body); color: var(--muted); } .flavor-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; } /* ---- Ads ---- */ .ad-mrec { display: flex; flex-direction: column; align-items: center; } .ad-label { align-self: flex-start; font: 800 0.58rem/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .ad-slot { border: 1px dashed var(--border); border-radius: 12px; background: repeating-linear-gradient(135deg, var(--panel-2), var(--panel-2) 11px, var(--panel-3) 11px, var(--panel-3) 22px); display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; font: 600 0.72rem/1.5 ui-monospace, Menlo, monospace; } .ad-slot-mrec { width: 300px; max-width: 100%; height: 250px; } .ad-slot-leaderboard { flex: 1; max-width: 728px; height: 54px; border-radius: 10px; } .ad-slot-filled { border-style: solid; background: none; padding: 0; overflow: hidden; } .ad-slot-filled img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; } .adbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--panel); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.3); padding: 9px 14px; } .adbar .ad-label { align-self: center; margin: 0; flex-shrink: 0; } .adbar-close, .modal-close { flex-shrink: 0; border: none; background: var(--panel-2); color: var(--muted); border-radius: 50%; cursor: pointer; line-height: 1; } .adbar-close { width: 28px; height: 28px; font-size: 1.1rem; } body.adbar-dismissed { padding-bottom: 28px; } body.adbar-dismissed .adbar { display: none; } /* ---- FAQ ---- */ .faq { max-width: 880px; margin: 14px auto 0; padding: 8px 20px; } .faq-title { text-align: center; margin: 0 0 6px; font: 800 1.5rem/1.1 var(--font-head); letter-spacing: -0.01em; } .faq-sub { text-align: center; margin: 0 0 20px; color: var(--muted); font: 600 0.9rem/1.4 var(--font-body); } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; box-shadow: var(--shadow); } .faq-item h3 { margin: 0 0 8px; font: 700 1.05rem/1.3 var(--font-head); } .faq-item p { margin: 0; color: var(--muted); font: 500 0.93rem/1.6 var(--font-body); } /* ---- Footer ---- */ .footer { max-width: 1440px; margin: 0 auto; padding: 12px 20px 8px; text-align: center; color: var(--muted); font: 600 0.8rem/1.5 var(--font-body); } /* ---- Instructions modal ---- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 18, 26, 0.55); backdrop-filter: blur(2px); } .modal-overlay[hidden] { display: none; } .modal { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.55); width: 100%; max-width: 540px; max-height: 86vh; overflow: auto; padding: 26px 28px; } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; } .modal-head h2 { margin: 0; font: 800 1.5rem/1.15 var(--font-head); letter-spacing: -0.01em; } .modal-close { width: 34px; height: 34px; font-size: 1.3rem; } .modal-summary { margin: 0 0 18px; color: var(--muted); font: 600 0.92rem/1.5 var(--font-body); } .steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .steps li { display: flex; gap: 13px; align-items: flex-start; font: 500 0.95rem/1.55 var(--font-body); } .step-n { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font: 800 0.9rem/1 var(--font-body); } .modal-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font: 500 0.82rem/1.5 var(--font-body); }