/* ========================================================================= Word Game — visual identity: "letterpress". The tiles read like metal type slugs locked into a composing stick. Body type is a clean grotesk; tile faces use a slab/mono to feel struck, not typed. Accent colours (correct / present) are theme-driven so players can recolour. ========================================================================= */ :root { /* These are just defaults; a .theme-* class on overrides all of them. Every theme is SELF-CONTAINED (full background + tiles + states), so the look never depends on Telegram's light/dark mode. */ --bg: #f3efe6; /* page background */ --surface: #ece6d8; /* empty tile / key face */ --surface-2: #e2dac9; /* card / pill background */ --ink: #26221c; /* primary text */ --ink-soft: #5c554a; /* secondary text */ --line: #d7cfbe; /* borders */ --line-strong: #c3b9a3; /* stronger borders */ --tile-empty-text: #26221c; /* The three letter states — bold solid fills, high contrast. */ --correct: #4f8a5b; --correct-ink: #ffffff; /* right letter, right spot */ --present: #d3a23f; --present-ink: #2a2014; /* right letter, wrong spot */ --absent: #8d8674; --absent-ink: #ffffff; /* not in word */ --accent: #26221c; /* primary buttons */ --accent-ink: #f3efe6; --radius: 6px; --tile: 56px; --gap: 6px; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-tile: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ================= FULL PALETTES ================= */ /* Light paper (default) */ .theme-classic { --bg:#f3efe6; --surface:#ece6d8; --surface-2:#e2dac9; --ink:#26221c; --ink-soft:#5c554a; --line:#d7cfbe; --line-strong:#c3b9a3; --tile-empty-text:#26221c; --correct:#4f8a5b; --correct-ink:#fff; --present:#d3a23f; --present-ink:#2a2014; --absent:#8d8674; --absent-ink:#fff; --accent:#26221c; --accent-ink:#f3efe6; } /* Dark + yellow, "5 Букв" style */ .theme-night { --bg:#0e0e10; --surface:#1c1c20; --surface-2:#1a1a1e; --ink:#f4f4f5; --ink-soft:#9b9ba3; --line:#2c2c32; --line-strong:#3a3a42; --tile-empty-text:#f4f4f5; --correct:#3aa55d; --correct-ink:#fff; --present:#e9c133; --present-ink:#14140f; --absent:#3a3a42; --absent-ink:#d4d4d8; --accent:#e9c133; --accent-ink:#14140f; } /* Classic green/grey on white, original Wordle */ .theme-paper { --bg:#ffffff; --surface:#ffffff; --surface-2:#f3f3f3; --ink:#1a1a1b; --ink-soft:#787c7e; --line:#d3d6da; --line-strong:#878a8c; --tile-empty-text:#1a1a1b; --correct:#6aaa64; --correct-ink:#fff; --present:#c9b458; --present-ink:#fff; --absent:#787c7e; --absent-ink:#fff; --accent:#1a1a1b; --accent-ink:#fff; } /* Deep ocean */ .theme-ocean { --bg:#0d1b2a; --surface:#1b2c3f; --surface-2:#172636; --ink:#e6eef6; --ink-soft:#92a4b6; --line:#26384b; --line-strong:#385272; --tile-empty-text:#e6eef6; --correct:#2f9e8f; --correct-ink:#fff; --present:#5bb0c9; --present-ink:#06222b; --absent:#34495e; --absent-ink:#dbe6f0; --accent:#5bb0c9; --accent-ink:#06222b; } /* Warm sunset */ .theme-sunset { --bg:#1f1310; --surface:#33201a; --surface-2:#2b1b15; --ink:#f7e8df; --ink-soft:#c39a87; --line:#43281f; --line-strong:#5e3a2c; --tile-empty-text:#f7e8df; --correct:#d2691e; --correct-ink:#fff; --present:#e0a13c; --present-ink:#2a1607; --absent:#4d3328; --absent-ink:#f0d9cc; --accent:#e0a13c; --accent-ink:#2a1607; } /* Grape */ .theme-grape { --bg:#15101f; --surface:#241a36; --surface-2:#1e152e; --ink:#efe8f7; --ink-soft:#a995c2; --line:#2f2347; --line-strong:#46355f; --tile-empty-text:#efe8f7; --correct:#7a5cc4; --correct-ink:#fff; --present:#b483d6; --present-ink:#1f1230; --absent:#3a2c52; --absent-ink:#e6dcf2; --accent:#b483d6; --accent-ink:#1f1230; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-body); overscroll-behavior: none; } #app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 8px) 16px calc(env(safe-area-inset-bottom) + 12px); } /* ---- Top bar ---- */ #topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .icon-btn { background: transparent; border: 1px solid var(--line-strong); color: var(--ink); width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .05s; } .icon-btn:hover { background: var(--surface); } .icon-btn:active { transform: scale(.94); } .regime-pill { flex: 1; text-align: center; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- Screens ---- */ .screen { flex: 1; display: flex; flex-direction: column; animation: fade .22s ease; } .hidden { display: none !important; } @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .screen-title { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 10px 0 18px; } /* ---- Name / hero ---- */ .hero { text-align: center; margin: 26px 0 30px; } .hero-tiles { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; } .hero-tiles .t { width: 46px; height: 46px; display: grid; place-items: center; font-family: var(--font-tile); font-weight: 700; font-size: 24px; border-radius: var(--radius); border: 1px solid var(--line-strong); box-shadow: 0 2px 0 var(--line-strong); } .t-idle { background: var(--surface); color: var(--ink); } .t-correct { background: var(--correct); color: var(--correct-ink); border-color: transparent; box-shadow: 0 2px 0 rgba(0,0,0,.18); } .t-present { background: var(--present); color: var(--present-ink); border-color: transparent; box-shadow: 0 2px 0 rgba(0,0,0,.18); } .hero h1 { font-size: 34px; font-weight: 900; letter-spacing: -.02em; margin: 0 0 8px; } .hero .sub { color: var(--ink-soft); font-size: 15px; margin: 0 auto; max-width: 300px; line-height: 1.45; } .field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 4px 2px 8px; } .text-input { width: 100%; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 14px 16px; font-size: 17px; color: var(--ink); font-family: var(--font-body); outline: none; transition: border-color .15s, box-shadow .15s; } .text-input:focus { border-color: var(--correct); box-shadow: 0 0 0 3px color-mix(in srgb, var(--correct) 22%, transparent); } .btn-primary { margin-top: 16px; width: 100%; background: var(--ink); color: var(--bg); border: none; border-radius: 12px; padding: 15px; font-size: 16px; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: transform .05s, opacity .15s; } .btn-primary:active { transform: scale(.985); } .btn-primary:disabled { opacity: .5; cursor: default; } .btn-primary.slim { width: auto; padding: 12px 22px; margin: 0; } .btn-primary.full { width: 100%; } .btn-ghost { background: transparent; border: 1.5px solid var(--line-strong); color: var(--ink); border-radius: 12px; padding: 13px 18px; font-size: 15px; font-weight: 600; cursor: pointer; } .btn-ghost.full { width: 100%; margin-top: 14px; } .hint { color: var(--ink-soft); font-size: 13px; min-height: 18px; margin: 10px 2px 0; text-align: center; } .hint.err { color: #b1442f; } /* ---- Setup options ---- */ .opt-group { margin-bottom: 20px; } .opt-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 9px; } .opt-help { font-size: 13px; color: var(--ink-soft); margin: -4px 0 10px; } .seg { display: flex; gap: 8px; } .seg.wrap { flex-wrap: wrap; } .seg-btn { flex: 1; min-width: 64px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink-soft); border-radius: 10px; padding: 11px 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .14s; } .seg-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } .seg.wrap .seg-btn { flex: 0 1 auto; min-width: 52px; } /* ---- New difficulty picker: panels + chips ---- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 16px; margin-bottom: 12px; } .panel-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: 11px; } .panel-note { font-size: 12.5px; color: var(--ink-soft); margin: -6px 0 11px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chips.wrap { gap: 7px; } .chip { flex: 1 1 auto; background: var(--bg); border: 2px solid var(--line-strong); color: var(--ink); border-radius: 10px; padding: 12px 14px; font-family: var(--font-body); font-size: 14.5px; font-weight: 600; cursor: pointer; transition: transform .06s, background .14s, border-color .14s, color .14s; white-space: nowrap; } .chip:active { transform: scale(.97); } /* Selected chip lights up like a solved board tile — the brand signature. */ .chip.active { background: var(--correct); border-color: var(--correct); color: var(--correct-ink); font-weight: 700; } /* Length chips are square letter-tiles */ .chips.wrap .chip { flex: 0 0 auto; min-width: 46px; text-align: center; font-family: var(--font-tile); font-weight: 700; padding: 12px 10px; } .btn-primary.big { margin-top: 6px; padding: 17px; font-size: 17px; } /* ---- Game screen layout: board centered in the middle, keyboard at bottom ---- */ #screen-game { justify-content: space-between; gap: 4px; } /* ---- Board ---- */ .board { display: grid; gap: var(--gap); justify-content: center; align-content: center; flex: 1 1 auto; min-height: 0; padding: 8px 0; } .board-row { display: grid; gap: var(--gap); justify-content: center; } .cell { width: var(--tile); height: var(--tile); display: grid; place-items: center; font-family: var(--font-tile); font-size: 28px; font-weight: 800; text-transform: uppercase; color: var(--tile-empty-text); background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius); user-select: none; transition: transform .08s; } .cell.filled { border-color: var(--ink-soft); animation: pop .1s ease; } @keyframes pop { 0% { transform: scale(.92); } 100% { transform: scale(1); } } .cell.correct { background: var(--correct); color: var(--correct-ink); border-color: var(--correct); } .cell.present { background: var(--present); color: var(--present-ink); border-color: var(--present); } .cell.absent { background: var(--absent); color: var(--absent-ink); border-color: var(--absent); } .cell.reveal { animation: flip .5s ease forwards; } @keyframes flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } } .board-row.shake { animation: shake .4s; } @keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } /* ---- Keyboard ---- */ .keyboard { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; padding-bottom: 2px; } .kb-row { display: flex; gap: 5px; justify-content: center; } .key { flex: 1; min-width: 0; height: 44px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); font-family: var(--font-tile); font-size: 15px; font-weight: 700; text-transform: uppercase; cursor: pointer; display: grid; place-items: center; transition: transform .05s, background .15s, color .15s; } .key:active { transform: translateY(1px); } .key.wide { flex: 1.5; font-size: 18px; } .key.correct { background: var(--correct); color: var(--correct-ink); border-color: var(--correct); } .key.present { background: var(--present); color: var(--present-ink); border-color: var(--present); } .key.absent { background: var(--absent); color: var(--absent-ink); border-color: var(--absent); } /* ---- Toast / endcard ---- */ .toast { position: fixed; top: 78px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 50; box-shadow: 0 6px 18px rgba(0,0,0,.2); animation: fade .2s ease; } .endcard { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 16px; padding: 18px; margin: 6px 0 12px; text-align: center; animation: fade .25s ease; } .endcard-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; } .endcard-sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 14px; } .endcard-actions { display: flex; gap: 10px; justify-content: center; } /* ---- Scoreboard ---- */ .sb-regime { font-size: 13px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; text-align: center; } .sb-table { flex: 1; } .sb-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; padding: 12px 12px; border-bottom: 1px solid var(--line); font-size: 15px; } .sb-row.head { color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border-bottom: 1.5px solid var(--line-strong); } .sb-row.me { background: color-mix(in srgb, var(--correct) 12%, transparent); border-radius: 8px; } .sb-rank { font-family: var(--font-tile); font-weight: 700; color: var(--ink-soft); } .sb-rank.medal { color: var(--present); } .sb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-best { font-family: var(--font-tile); font-weight: 700; } .sb-total { font-family: var(--font-tile); color: var(--ink-soft); font-size: 13px; } .sb-empty { text-align: center; color: var(--ink-soft); padding: 40px 0; font-size: 15px; } .sb-col { text-align: right; font-size: 11px; } /* ---- Stats screen ---- */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 8px; text-align: center; } .stat-num { font-family: var(--font-tile); font-size: 26px; font-weight: 800; color: var(--ink); } .stat-label { font-size: 11px; color: var(--ink-soft); margin-top: 4px; line-height: 1.25; } .dist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .dist-row { display: flex; align-items: center; gap: 8px; } .dist-n { width: 16px; text-align: center; font-family: var(--font-tile); font-weight: 700; color: var(--ink-soft); font-size: 13px; } .dist-bar-wrap { flex: 1; background: var(--surface); border-radius: 5px; overflow: hidden; height: 24px; } .dist-bar { height: 100%; background: var(--correct); color: var(--correct-ink); display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; font-family: var(--font-tile); font-weight: 700; font-size: 12px; min-width: 26px; border-radius: 5px; transition: width .4s ease; } .dist-bar.zero { background: transparent; color: var(--ink-soft); justify-content: flex-start; padding-left: 2px; } /* ---- Theme picker ---- */ .theme-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .theme-card { border: 2px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; transition: border-color .15s, transform .05s; position: relative; overflow: hidden; } .theme-card:active { transform: scale(.98); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .theme-card .swatches { display: flex; gap: 6px; margin-bottom: 8px; } .theme-card .sw { width: 26px; height: 26px; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .theme-card .tname { font-size: 12.5px; font-weight: 700; mix-blend-mode: difference; color: #fff; } .version { text-align: center; color: var(--ink-soft); font-size: 12px; margin-top: 18px; }