/* Colors are tokens, one set for light and one for dark. --on-* = text on that color. Default "Green & yellow": the familiar letter colors (green = right spot, yellow = wrong spot, gray = not in word), so new players read the tiles without the help. Purple is the game's own color and marks the theme layer: the theme panel, numbered squares and the active outline (--accent). Yellow uses dark text for contrast. */ :root { --bg: #ffffff; --fg: #1c1b22; --muted: #6e6b7b; --border: #d9d6e3; --tile-border: #c4c0d1; --border-filled: #8b8799; --correct: #4a9d5b; --present: #e3b93b; --absent: #7c7f8c; --revealed: #b3b0bf; --on-correct: #ffffff; --on-present: #2b2100; --on-absent: #ffffff; --on-revealed: #ffffff; --key: #dedbe8; --accent: #7c3aed; --on-accent: #ffffff; --overlay: rgba(255, 255, 255, 0.6); --card: #ffffff; --panel: rgba(124, 58, 237, 0.07); --gap: 5px; --cell: min(52px, calc((100vw - 32px) / var(--cols, 6) - var(--gap))); } /* Dark mode follows the system unless the player picked Light or Dark in Settings (data-theme on ). The dark block is repeated for the forced case. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #131218; --fg: #f4f3f8; --muted: #8f8b9e; --border: #36343f; --tile-border: #6b6880; --border-filled: #8b87a5; --correct: #4f9a5c; --present: #c9a232; --absent: #3b3946; --revealed: #57546a; --on-correct: #ffffff; --on-present: #1f1800; --on-absent: #d9d7e0; --on-revealed: #e4e2ea; --key: #7f7b8f; --accent: #a78bfa; --on-accent: #1a0d33; --overlay: rgba(0, 0, 0, 0.5); --card: #1e1d25; --panel: rgba(167, 139, 250, 0.1); } } :root[data-theme="dark"] { --bg: #131218; --fg: #f4f3f8; --muted: #8f8b9e; --border: #36343f; --tile-border: #6b6880; --border-filled: #8b87a5; --correct: #4f9a5c; --present: #c9a232; --absent: #3b3946; --revealed: #57546a; --on-correct: #ffffff; --on-present: #1f1800; --on-absent: #d9d7e0; --on-revealed: #e4e2ea; --key: #7f7b8f; --accent: #a78bfa; --on-accent: #1a0d33; --overlay: rgba(0, 0, 0, 0.5); --card: #1e1d25; --panel: rgba(167, 139, 250, 0.1); } /* Alternative tile colors (Settings → Tile colors, testing). Both use teal for the theme layer, since their tiles are purple. */ /* "Purple shades": one color family, more vivid = closer. Each state differs in brightness, not just hue, so color-blind players can tell them apart. */ :root[data-palette="purple"] { --correct: #6d28d9; --present: #d4c2fa; --absent: #7c7f8c; --revealed: #b3b0bf; --on-correct: #ffffff; --on-present: #2a1650; --on-absent: #ffffff; --on-revealed: #ffffff; } /* "Purple & orange": purple = right spot, orange = wrong spot, slate = not in word. */ :root[data-palette="orange"] { --correct: #7b3fe4; --present: #e8740c; --absent: #6b6f7d; --revealed: #a9a6b5; --on-correct: #ffffff; --on-present: #ffffff; --on-absent: #ffffff; --on-revealed: #ffffff; } :root[data-palette="purple"], :root[data-palette="orange"] { --accent: #0d9488; --on-accent: #ffffff; --panel: rgba(13, 148, 136, 0.07); } @media (prefers-color-scheme: dark) { :root[data-palette="purple"]:not([data-theme="light"]) { --correct: #a67cff; --present: #5b44a0; --absent: #2c2b33; --revealed: #4a4758; --on-correct: #1a0d33; --on-present: #ffffff; } :root[data-palette="orange"]:not([data-theme="light"]) { --correct: #8352e8; --present: #df7212; --absent: #3b3946; --revealed: #57546a; } :root[data-palette="purple"]:not([data-theme="light"]), :root[data-palette="orange"]:not([data-theme="light"]) { --accent: #2dd4bf; --on-accent: #0b1f1d; --panel: rgba(45, 212, 191, 0.08); } } :root[data-palette="purple"][data-theme="dark"] { --correct: #a67cff; --present: #5b44a0; --absent: #2c2b33; --revealed: #4a4758; --on-correct: #1a0d33; --on-present: #ffffff; } :root[data-palette="orange"][data-theme="dark"] { --correct: #8352e8; --present: #df7212; --absent: #3b3946; --revealed: #57546a; } :root[data-palette="purple"][data-theme="dark"], :root[data-palette="orange"][data-theme="dark"] { --accent: #2dd4bf; --on-accent: #0b1f1d; --panel: rgba(45, 212, 191, 0.08); } * { box-sizing: border-box; } /* Stop double-tap-to-zoom (e.g. fast Backspace taps); pinch zoom still works. */ * { touch-action: manipulation; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--fg); font-family: "Clear Sans", "Helvetica Neue", Arial, sans-serif; display: flex; flex-direction: column; align-items: center; } button { font: inherit; color: inherit; } /* Hidden always wins, even over a component's own display (e.g. the Share button). */ [hidden] { display: none !important; } header { width: 100%; max-width: 500px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--border); } .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .header-left { display: flex; align-items: center; gap: 8px; } /* Running score: every guess, word or theme. */ /* A plain readout, deliberately not a filled shape, so it doesn't look tappable. Label stacked over the number keeps it narrow enough for a 320px phone. */ #score-live { display: flex; flex-direction: column; align-items: center; min-width: 40px; font-weight: bold; line-height: 1.05; user-select: none; } #score-live span { font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); } #score-live b { font-size: 20px; font-variant-numeric: tabular-nums; } #score-live.final b { color: var(--accent); } #score-live.bump { animation: pop 0.25s; } .icon-btn { background: none; border: 2px solid var(--border); border-radius: 50%; width: 34px; height: 34px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .icon-btn svg { width: 20px; height: 20px; display: block; } /* Theme panel: the goal, so it gets a card of its own. */ #theme-panel { width: calc(100% - 32px); max-width: 468px; margin: 10px 16px 4px; padding: 10px 14px 12px; border: 2px solid var(--accent); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; align-items: center; gap: 8px; } #theme-panel.won { border-color: var(--accent); } #theme-panel.lost { border-color: var(--muted); } .theme-label { font-size: 12px; font-weight: bold; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); } #theme-bar { display: flex; gap: 6px; } #theme-bar span { /* 11vw keeps a 6-letter theme inside the panel on a 320px phone */ width: min(42px, 11vw); height: min(42px, 11vw); border: 2px solid var(--accent); border-radius: 8px; background: var(--card); display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 24px; text-transform: uppercase; position: relative; } /* Small number matching the clue whose marked square gives this letter. */ #theme-bar span::after { content: attr(data-n); position: absolute; top: 2px; right: 4px; font-size: 10px; line-height: 1; color: var(--accent); } #theme-bar span.known::after, #theme-panel.won #theme-bar span::after, #theme-panel.lost #theme-bar span::after { color: inherit; opacity: 0.75; } #theme-bar span.known { background: var(--accent); color: var(--on-accent); } #theme-bar span.cursor { box-shadow: 0 0 0 3px var(--accent); } #theme-panel.won #theme-bar span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #theme-panel.lost #theme-bar span { background: var(--revealed); border-color: var(--revealed); color: var(--on-revealed); } #theme-btn { width: 100%; max-width: 320px; min-height: 40px; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 20px; padding: 8px 16px; font-size: 15px; font-weight: bold; cursor: pointer; } /* Before any clue is solved: an outline button, so solving clues reads as the way in rather than the theme guess. */ #theme-btn.quiet { width: auto; min-height: 32px; background: none; color: var(--accent); border: 2px solid var(--accent); padding: 4px 16px; font-size: 14px; } #theme-btn.secondary { background: none; color: var(--accent); border: 2px solid var(--accent); } #theme-btn:disabled { background: none; color: var(--muted); border: 2px dashed var(--border); cursor: default; font-size: 13px; } #theme-btn b { display: block; } #theme-btn .left { display: block; margin-top: 1px; font-size: 12px; font-weight: normal; } #theme-btn .pips { margin-right: 5px; letter-spacing: 2px; } /* Short phones: tighten the panel so the board keeps some room. */ @media (max-height: 700px) { #theme-panel { margin-top: 6px; padding: 6px 12px 8px; gap: 5px; } #theme-bar span { width: min(34px, 10vw); height: min(34px, 10vw); font-size: 19px; } #theme-btn { min-height: 32px; padding: 4px 14px; font-size: 14px; } #theme-btn .left { font-size: 11px; } } #theme-msg { font-size: 13px; font-weight: bold; color: var(--accent); } #theme-msg.hint { font-weight: normal; color: var(--fg); text-align: center; text-wrap: balance; } #theme-msg:empty, #theme-wrong:empty { display: none; } #theme-wrong { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } /* Where typing goes: the active box (theme panel or current clue) has the teal outline and tint; the other rests with a plain outline, still full strength. Tapping a resting box switches to it (game.js). */ #theme-panel:not(.won):not(.lost):not(.editing) { cursor: pointer; border-color: var(--border); background: none; } .word-block.dim { cursor: pointer; outline-color: var(--border); background: none; } .word-block.dim .clue-label { color: var(--muted); } main { flex: 1; width: 100%; overflow-y: auto; display: flex; justify-content: center; padding: 8px 16px 16px; } #board { display: flex; flex-direction: column; gap: var(--gap); /* Pinned to the grid's own width. The active word's box bleeds 8px past it so its tiles stay on the board's columns; without this the box would widen the board whenever the active clue reaches the right edge, and centering would shift every row sideways. --cell keeps this inside the page's gutters. */ width: calc(var(--cols) * (var(--cell) + var(--gap)) - var(--gap)); flex-shrink: 0; /* main is a row flex container, so stretch would cap this at main's height and let the clues spill out of a box shorter than they are — which breaks any sticky child, since it can only stick inside its own box. */ align-self: flex-start; } /* Every line shares the same column grid so the spine tiles align. */ .line { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); gap: var(--gap); } .word-gap { height: 4px; } .tile { width: var(--cell); height: var(--cell); border: 2px solid var(--tile-border); display: flex; align-items: center; justify-content: center; font-size: calc(var(--cell) * 0.55); font-weight: bold; text-transform: uppercase; position: relative; user-select: none; } .tile.filled { border-color: var(--border-filled); animation: pop 0.1s; } .tile.correct, .tile.present, .tile.absent, .tile.revealed { border-color: transparent; } .tile.correct { background: var(--correct); color: var(--on-correct); } .tile.present { background: var(--present); color: var(--on-present); } .tile.absent { background: var(--absent); color: var(--on-absent); } .tile.revealed { background: var(--revealed); color: var(--on-revealed); } /* How to start, above the clues, until the first guess. Zero width with a full min-width so the text wraps inside the board instead of widening it. Sticky, because the board area is only ~170px on a short phone: scrolling the active clue into view would otherwise carry this line off the top before it is read. */ .board-hint { position: sticky; top: 0; z-index: 2; width: 0; min-width: 100%; text-align: center; font-size: 12px; line-height: 1.4; color: var(--muted); background: var(--bg); padding-bottom: 4px; margin-bottom: 2px; } .board-hint b { display: block; font-size: 14px; color: var(--fg); } /* An open clue you aren't typing into: tap it to move there. */ .line.pick { cursor: pointer; } .line.pick:hover .tile:not(.correct):not(.present):not(.absent) { border-color: var(--border-filled); } .line.pick:hover .tile.spine { box-shadow: 0 0 0 3px var(--accent); } /* A clue you ran out of tries on: closed, its theme letter never revealed. */ .line.closed { opacity: 0.45; } /* The spine (theme letter) decoration: accent ring + the clue's number in the corner, matching the numbered theme square it fills. */ .tile.spine { box-shadow: 0 0 0 2px var(--accent); } .tile.spine::after { content: attr(data-n); position: absolute; top: 2px; right: 3px; font-size: max(9px, calc(var(--cell) * 0.2)); line-height: 1; color: var(--accent); } .tile.spine.correct, .tile.spine.present, .tile.spine.absent, .tile.spine.revealed { box-shadow: 0 0 0 3px var(--accent); } .tile.spine.correct::after, .tile.spine.present::after, .tile.spine.absent::after, .tile.spine.revealed::after { color: inherit; opacity: 0.8; } /* Copy of a solved clue's marked tile, flying up to the theme bar. */ .tile.ghost { position: fixed; margin: 0; z-index: 5; transform-origin: 0 0; pointer-events: none; } .tile.flip { animation: flip 0.5s ease both; } .shake { animation: shake 0.4s; } .bounce { animation: bounce 0.6s ease both; } @keyframes pop { 50% { transform: scale(1.1); } } @keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } } @keyframes shake { 10%, 90% { transform: translateX(-2px); } 30%, 70% { transform: translateX(4px); } 50% { transform: translateX(-4px); } } @keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-12px); } } /* The active word's box hugs its own columns; the -8px offsets the padding so its tiles stay aligned with the board's grid. */ .word-block { display: flex; flex-direction: column; gap: var(--gap); margin: 2px 0 2px calc(var(--off) * (var(--cell) + var(--gap)) - 8px); width: calc(var(--len) * (var(--cell) + var(--gap)) - var(--gap) + 16px); padding: 8px; border-radius: 8px; background: var(--panel); outline: 2px solid var(--accent); } .word-block .line { grid-template-columns: repeat(var(--len), var(--cell)); } /* Unscored tiles (empty or typed) sit on the card color, like the theme squares. */ .word-block .tile:not(.correct):not(.present):not(.absent) { background: var(--card); } .clue-label { font-size: 11px; font-weight: bold; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; margin-top: -2px; } .tries { text-align: center; font-size: 12px; font-weight: bold; color: var(--muted); white-space: nowrap; } .tries b { display: block; margin-bottom: 2px; font-size: 14px; color: var(--fg); } .tries .dots { margin-right: 6px; letter-spacing: 2px; color: var(--accent); } /* "type any word" over the empty first row of a first game. */ #input-line.placeholder { position: relative; } #input-line.placeholder::after { content: attr(data-ph); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 10px; border-radius: 10px; background: var(--card); color: var(--muted); font-size: 14px; white-space: nowrap; pointer-events: none; } .color-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: var(--muted); } .color-key span { display: flex; align-items: center; gap: 5px; } .color-key i { width: 14px; height: 14px; border-radius: 2px; } .color-key .correct { background: var(--correct); } .color-key .present { background: var(--present); } .color-key .absent { background: var(--absent); } /* Keyboard */ #keyboard { width: 100%; max-width: 500px; padding: 0 8px 12px; } .kb-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; } .kb-row .spacer { flex: 0.5; } .key { flex: 1; height: 54px; border: 0; border-radius: 4px; background: var(--key); font-weight: bold; font-size: 14px; text-transform: uppercase; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } .key.wide { flex: 1.5; font-size: 12px; } .key.correct { background: var(--correct); color: var(--on-correct); } .key.present { background: var(--present); color: var(--on-present); } .key.absent { background: var(--absent); color: var(--on-absent); } /* Opening screen */ #splash { position: fixed; inset: 0; z-index: 30; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; text-align: center; overflow-y: auto; } .splash-logo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; } .splash-logo .r { display: flex; gap: 3px; margin-left: calc(var(--o) * 27px); } .splash-logo i { width: 24px; height: 24px; border-radius: 3px; background: var(--correct); color: var(--on-correct); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; font-style: normal; text-transform: uppercase; } .splash-logo i.t { background: var(--accent); color: var(--on-accent); border-radius: 6px; } #splash h1 { margin: 0 0 8px; font-size: 34px; letter-spacing: -0.01em; } .splash-tag { margin: 0 0 28px; font-size: 19px; line-height: 1.35; max-width: 320px; text-wrap: balance; } .splash-tag b { display: block; margin-top: 6px; color: var(--accent); } /* wrap-reverse: on a narrow phone the buttons stack with Play on top. */ .splash-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap-reverse; } .splash-btn { min-width: 140px; height: 50px; padding: 0 24px; border-radius: 25px; border: 2px solid var(--accent); background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: bold; cursor: pointer; } .splash-btn.quiet { background: none; color: var(--fg); border-color: var(--border-filled); } .splash-date { margin: 28px 0 0; font-size: 14px; line-height: 1.5; } .splash-date b, .splash-date span { display: block; } .splash-date span { color: var(--muted); } /* Toast */ #toast { position: fixed; /* Sits at the top of the board, under the theme panel; game.js measures it so it doesn't depend on the keyboard's height. This is the fallback. */ top: 30%; left: 50%; max-width: calc(100vw - 32px); text-align: center; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 6px; font-weight: bold; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 20; } #toast.show { opacity: 1; } /* Modals */ .modal { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; overscroll-behavior: contain; z-index: 10; } /* margin:auto centers the card when it fits and pins it to the top when it doesn't, so its top edge can never end up above the screen. */ .modal-card { margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 8px; max-width: 420px; width: 100%; /* dvh = the visible height on phones (excludes the browser's address bar) */ max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); } /* The title and close button stay put; only the body scrolls. */ .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px 8px 24px; flex: none; } .modal-head h2 { margin: 0; } .modal-body { padding: 4px 24px 20px; overflow-y: auto; overscroll-behavior: contain; } .close { flex: none; width: 40px; height: 40px; border-radius: 50%; background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; } .muted { color: var(--muted); } .center { text-align: center; } /* Help screen */ #help-modal p { margin: 6px 0; line-height: 1.4; } #help-modal .lead { font-size: 17px; margin-bottom: 14px; } .help-section { border-top: 1px solid var(--border); padding: 12px 0 8px; } .help-section h3 { margin: 0 0 6px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; } .demo-row { display: flex; gap: 4px; margin: 10px 0; } .demo-row .mini { width: 34px; height: 34px; font-size: 18px; } .mini { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); font-weight: bold; text-transform: uppercase; position: relative; } .mini.correct, .mini.present, .mini.absent { border-color: transparent; } .mini.correct { background: var(--correct); color: var(--on-correct); } .mini.present { background: var(--present); color: var(--on-present); } .mini.absent { background: var(--absent); color: var(--on-absent); } .mini.spine { box-shadow: 0 0 0 2px var(--accent); } .mini.spine::after { content: attr(data-n); position: absolute; top: 1px; right: 2px; font-size: 9px; line-height: 1; color: var(--accent); } .mini.spine.absent::after { color: inherit; } .legend, .tiers { list-style: none; padding: 0; margin: 8px 0; } .legend li { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .tiers li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); } .tiers li:last-child { border-bottom: 0; } .tier-emoji { font-size: 20px; text-align: center; } .tiers li span:last-child { color: var(--muted); font-size: 14px; text-align: right; } .stats { display: flex; justify-content: space-around; gap: 4px; text-align: center; margin: 16px 0; } .stats b { display: block; font-size: 26px; } .stats span { font-size: 11px; } #result-score { text-align: center; margin: 4px 0 8px; } #result-score b { display: block; font-size: 56px; line-height: 1; color: var(--accent); } #result-score span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); } /* Results popup: today's result (with Share) on top, all-time stats below. */ #result { padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid var(--border); } #result-text { text-align: center; margin: 0 0 16px; } .stats-title { margin: 0; font-size: 15px; text-align: center; } .dist-title { margin: 4px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; } #dist { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 8px; align-items: center; margin-bottom: 18px; font-size: 14px; } #dist .range { color: var(--muted); font-variant-numeric: tabular-nums; } #dist .bar { min-width: 24px; padding: 2px 6px; border-radius: 3px; background: var(--absent); color: var(--on-absent); font-size: 12px; font-weight: bold; text-align: right; } #dist .bar.now { background: var(--accent); color: var(--on-accent); } .primary { display: block; margin: 0 auto; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 6px; padding: 12px 32px; font-weight: bold; font-size: 18px; cursor: pointer; } /* Settings */ .setting { border: 0; margin: 0 0 16px; padding: 0; } .setting legend { font-weight: bold; margin-bottom: 8px; padding: 0; } .setting legend small { font-weight: normal; color: var(--muted); } .segmented { display: flex; border: 2px solid var(--border); border-radius: 10px; overflow: hidden; } /* Labels stretch to the tallest option and their spans fill them, so a label that wraps to two lines doesn't leave the others' fill short. */ .segmented label { flex: 1; display: flex; cursor: pointer; } .segmented input { position: absolute; opacity: 0; pointer-events: none; } .segmented span { flex: 1; display: flex; align-items: center; justify-content: center; padding: 9px 6px; text-align: center; font-size: 14px; font-weight: bold; color: var(--muted); } .segmented label + label span { border-left: 2px solid var(--border); } .segmented input:checked + span { background: var(--accent); color: var(--on-accent); } .segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -4px; } .setting .demo-row { margin-top: 10px; }