/* 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; } /* New disclosure wrapper: transparent on desktop so its rows still flow into the .right grid exactly as before. #btnMore is mobile-only. */ .top .right .moreControls { display: contents; } #btnMore { display: none; } .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; } /* Game layout: input controls span full width on top; the grid and the ranked list sit side by side below (grid left, ranked right) at every width. Desktop keeps its original shape — controls + grid in the left column, the ranked list spanning the right — via grid-template-areas. (2026-05-31) */ .gameGrid { display: grid; /* minmax(0,1fr) (not 1fr) lets the columns shrink below their content's min-width, so the monospace `white-space: pre` ranked list scrolls inside its box instead of blowing the track out of the container. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "controls controls" "grid ranked"; gap: 16px; align-items: start; } .area-controls { grid-area: controls; } .area-grid { grid-area: grid; } .area-ranked { grid-area: ranked; } .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; } } /* ---- Pool size hint + ranked-list scroll affordance ---- */ .poolHint { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); white-space: nowrap; } .cardTitleRow { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } /* Ranked-list heading reads "RANKED LIST" over "[x] REMAINING". */ .cardTitleRow .cardTitle { text-transform: uppercase; } .boxHint { margin-top: 6px; text-align: right; font-size: 11px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.1em; } #rankBox { /* Visual fade at the bottom edge to signal scrollable content. */ -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%); /* Override the shared banner.css no-select so users can long-press to * copy a candidate word out of the ranked list. */ -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } #rankBox:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .tile { transition: none; } } /* ---- Mobile compaction (≤640px): compact header bar + collapsible options ---- */ @media (max-width: 640px) { .wrap { padding: 14px 12px 28px; gap: 10px; } h1 { font-size: 24px; } /* Header stacks; right column becomes full-width block flow. */ .top { flex-direction: column; align-items: stretch; gap: 10px; } .top .right { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; } /* Primary row: date grows, Today + Options sit inline. */ .top .right .primaryRow { display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; } .top .right .primaryRow .label { display: none; } /* "Puzzle date" label: redundant on mobile */ .top .right .primaryRow .dateInput { flex: 1 1 auto; min-width: 0; width: auto; } #btnMore { display: inline-flex; align-items: center; white-space: nowrap; } /* Secondary controls: hidden until the user opens them. */ .top .right .moreControls { display: none; } .top .right .moreControls.open { display: flex; flex-direction: column; gap: 8px; width: 100%; } .top .right .moreControls .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .top .right .moreControls .sel { flex: 1 1 auto; min-width: 0; width: auto; } /* Smaller, auto-width controls (no more full-width stacked blocks). */ .dateInput, .sel, .btn { padding: 9px 12px; font-size: 13px; min-height: 40px; } .btn { flex: 0 0 auto; } /* Grid + ranked list side by side: the ranked column shrinks to fit its content (auto), handing the freed width to the grid so the tiles grow. align-items:start keeps the GRID card at its natural (square-tile) height so the tiles can never be stretched/overflowed; only the ranked card is stretched (align-self below) to match the grid's height. */ .gameGrid { gap: 8px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .card { padding: 10px; gap: 8px; } .cardTitle { font-size: 15px; } /* Square tiles that scale to the narrow grid column. Rows are content-sized (auto, not 1fr) so they're never stretched taller than the tile square. */ .grid { grid-template-rows: repeat(6, auto); gap: 4px; padding: 2px 0; } .rowGrid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .tile { height: auto; aspect-ratio: 1 / 1; font-size: 18px; } /* Input row stays compact; bigger tap targets. */ .guessInput { min-width: 0; flex: 1 1 100%; min-height: 40px; } .playRow { gap: 6px; } .playRow .btn { min-height: 40px; flex: 1 1 auto; } /* Ranked solver list beside the grid: only THIS card stretches to the grid's height, and its box fills the card so the two boxes are the same height. */ .area-ranked { align-self: stretch; } .area-ranked .box { flex: 1 1 0; min-height: 0; max-height: none; } /* Hide the wide "Scroll for the full list" hint on mobile — it would force the auto-sized ranked column wider than its content. The box's bottom fade-gradient already signals scrollability. */ .area-ranked .boxHint { display: none; } }