/* phnx wordle styles — matches phnx2048 brand system * * Palette parity with /opt/stack/apps/phnx2048/frontend/src/style.css. * Plum 1px borders on every outlined element; tangelo accent; mustard highlight. * Light theme default, opt-in dark via [data-theme="dark"] on . * * Wordle-specific tile mapping: * correct -> tangelo (brand primary) * present -> mustard (matches the classic yellow) * absent -> muted slate fill, soft border */ :root { --tangelo: #EE7526; --mustard: #FBD652; --vermilion: #D74820; --plum: #77161C; --rich-black: #030519; --slate: #353747; --charcoal: #333333; --cream: #F5EEE5; --beige: #EFEDE9; --off-white: #F5F5F5; --light-grey: #F0F0F0; --pastel-grey: #5C5C5C; --bg: #FFFFFF; --bg-elev: var(--off-white); --panel: var(--off-white); --panel-2: #FFFFFF; --panel-warm: var(--cream); --panel-warm2: var(--beige); --border: var(--plum); --border-2: var(--plum); --fg: var(--pastel-grey); --fg-strong: var(--rich-black); --fg-muted: #8A8A8A; --fg-faint: #BFBFBF; --accent: var(--tangelo); --accent-hover: var(--vermilion); --highlight: var(--mustard); --highlight-fg: var(--rich-black); --danger: var(--plum); /* Tile colour roles */ --tile-empty-bg: var(--off-white); --tile-empty-bd: var(--plum); --tile-absent-bg: #D6D4D0; --tile-absent-fg: #6A6864; --tile-present-bg: var(--mustard); --tile-present-fg: var(--rich-black); --tile-correct-bg: var(--tangelo); --tile-correct-fg: #FFFFFF; --radius: 12px; --radius-sm: 8px; --shadow: 0 6px 20px rgba(3, 5, 25, 0.06), 0 1px 2px rgba(3, 5, 25, 0.04); --shadow-strong: 0 12px 32px rgba(3, 5, 25, 0.12); } :root[data-theme="dark"] { --bg: var(--rich-black); --bg-elev: #0a0c1f; --panel: #14161f; --panel-2: #1c1e2a; --panel-warm: var(--charcoal); --panel-warm2: var(--slate); --border: var(--plum); --border-2: var(--plum); --fg: var(--cream); --fg-strong: var(--cream); --fg-muted: #A8A59C; --fg-faint: #6B6961; --shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.55); --tile-empty-bg: rgba(245, 238, 229, 0.06); --tile-empty-bd: var(--plum); --tile-absent-bg: rgba(245, 238, 229, 0.08); --tile-absent-fg: #807d75; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { background: radial-gradient(1100px 500px at 20% -150px, rgba(238, 117, 38, 0.06) 0%, transparent 60%), radial-gradient(900px 500px at 110% 0%, rgba(251, 214, 82, 0.08) 0%, transparent 60%), var(--bg); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100dvh; } :root[data-theme="dark"] body { background: radial-gradient(1200px 600px at 30% -200px, #0e1130 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, rgba(238, 117, 38, 0.10) 0%, transparent 60%), var(--bg); } /* ---- Layout ---- */ .wrap { max-width: 1100px; margin: 0 auto; padding: 22px 16px 36px; display: flex; flex-direction: column; gap: 14px; } /* ---- Header ---- */ .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; } .left { display: flex; flex-direction: column; gap: 6px; } h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--fg-strong); } h1::first-letter { color: var(--accent); } .sub { color: var(--fg-faint); font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-transform: uppercase; } /* Right toolbar: compact grid */ .top .right { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; gap: 8px 10px; justify-content: end; } .top .right .row { display: contents; } .top .right .label { margin: 0 2px 0 0; color: var(--fg-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; } /* ---- Inputs / buttons ---- */ .dateInput, .sel, .btn, .guessInput { background: var(--panel-2); color: var(--fg-strong); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease; } .dateInput { cursor: text; min-width: 160px; } .sel { min-width: 140px; } .btn:hover, .dateInput:hover, .sel:hover { border-color: var(--accent); color: var(--accent); } .btn:focus, .dateInput:focus, .sel:focus, .guessInput:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .btn:active { transform: translateY(1px); } .btn.active { background: var(--accent); color: #FFFFFF; border-color: transparent; } .btn.active:hover { background: var(--accent-hover); color: #FFFFFF; } /* ---- Status bar / toast ---- */ .toast { margin: 0; min-height: 18px; font-weight: 600; font-size: 13px; color: var(--accent); } .statusBar { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--border); } .solverMeta { white-space: pre-wrap; line-height: 1.45; color: var(--fg); font-size: 13px; } /* ---- Cards ---- */ main { display: flex; flex-direction: column; gap: 14px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); } .cardInner { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .cardTitle { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--fg-strong); } .cardTitleSm { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); font-weight: 700; } /* ---- Play row + grid ---- */ .playRow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .guessInput { font-weight: 800; letter-spacing: 2px; text-transform: uppercase; min-width: 220px; font-size: 16px; } .grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 8px; padding: 6px 0 2px; } .rowGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .tile { height: 56px; display: flex; align-items: center; justify-content: center; background: var(--tile-empty-bg); color: var(--fg-strong); border: 1px solid var(--tile-empty-bd); border-radius: var(--radius-sm); font-size: 26px; font-weight: 800; text-transform: uppercase; user-select: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 2px 6px rgba(119, 22, 28, 0.10); transition: background-color 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out; } :root[data-theme="dark"] .tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.30); } .tile.absent { background: var(--tile-absent-bg); color: var(--tile-absent-fg); border-color: var(--plum); box-shadow: none; } .tile.present { background: var(--tile-present-bg); color: var(--tile-present-fg); border-color: var(--plum); } .tile.correct { background: var(--tile-correct-bg); color: var(--tile-correct-fg); border-color: var(--plum); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(238, 117, 38, 0.30); } /* ---- Misc / ranked list ---- */ .controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .toggle { display: flex; gap: 8px; align-items: center; color: var(--fg-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; } .box { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; background: var(--panel-2); max-height: 360px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; white-space: pre; color: var(--fg); } .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 980px) { .cols2 { grid-template-columns: 1fr; } } .cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } @media (max-width: 980px) { .cols3 { grid-template-columns: 1fr; } } /* ---- Footer ---- */ .foot { margin-top: 4px; color: var(--fg-faint); font-size: 11px; text-align: center; } /* ---- Small screens: stack toolbar ---- */ @media (max-width: 900px) { .top { flex-direction: column; align-items: stretch; } .top .right { grid-auto-flow: row; grid-template-columns: 1fr 1fr; justify-content: start; width: 100%; } .top .right .dateInput, .top .right .sel { min-width: 0; width: 100%; } } @media (max-width: 520px) { .top .right { grid-template-columns: 1fr; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .tile { transition: none; } }