/* Light/Dark tokens (Wordle-ish). Default: light. */ :root{ --bg:#ffffff; --panel:#ffffff; --text:#111111; --muted:#6b7280; --border:#d3d6da; --tile:#ffffff; --tileBorder:#d3d6da; /* NYT Wordle colors */ --green:#6aaa64; --yellow:#c9b458; --gray:#787c7e; --shadow:0 18px 50px rgba(17,24,39,.08); --r:12px; } /* Auto dark when OS prefers dark */ @media (prefers-color-scheme: dark){ :root{ --bg:#121213; --panel:#121213; --text:#ffffff; --muted:#d3d6da; --border:#3a3a3c; --tile:#121213; --tileBorder:#3a3a3c; } } /* Manual override: add */ body[data-theme="light"]{ --bg:#ffffff; --panel:#ffffff; --text:#111111; --muted:#6b7280; --border:#d3d6da; --tile:#ffffff; --tileBorder:#d3d6da; } body[data-theme="dark"]{ --bg:#121213; --panel:#121213; --text:#ffffff; --muted:#d3d6da; --border:#3a3a3c; --tile:#121213; --tileBorder:#3a3a3c; } *{box-sizing:border-box} .hidden{display:none} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background:var(--bg); min-width:320px; } .bg{ background: var(--bg); } a{color:inherit;text-decoration:none} button,input{font:inherit} button:disabled{cursor:not-allowed;opacity:.58} button,a{touch-action:manipulation} :focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; } .topbar{ position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:12px max(16px, calc((100vw - 1000px) / 2)); z-index:20; backdrop-filter:blur(14px); } .brand{display:flex; align-items:center; gap:12px} .brandLink{display:flex; align-items:center; gap:12px} .logo{ width:40px;height:40px;border-radius:8px; display:grid;place-items:center; background:transparent; border:2px solid var(--border); font-weight:900; letter-spacing:.5px; } .title{font-weight:900; letter-spacing:.8px} .subtitle{font-size:12px;color:var(--muted); margin-top:2px} .nav{display:flex; gap:10px; align-items:center} .navUser{display:flex;gap:8px;align-items:center} .navUser.hidden{display:none} .navlink{ min-height:44px; padding:10px 12px; border-radius:8px; border:2px solid var(--border); background:transparent; font-weight:800; color:var(--text); cursor:pointer; } .navlink.primary{ background:var(--text); color:var(--bg); border-color:var(--text); } .container{ width:min(1000px, calc(100% - 28px)); margin:0 auto; padding:18px 0 30px; } .card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); } .homeCard{ max-width:720px; min-height:calc(100vh - 160px); margin:0 auto; display:flex; flex-direction:column; justify-content:center; gap:14px; } .roomy{padding:16px} .topSpace{margin-top:10px} .hero{ display:grid; grid-template-columns: 1.25fr .75fr; gap:14px; align-items:start; } .h1{margin:0 0 10px; font-size:clamp(26px,3.2vw,40px); letter-spacing:-.7px} .h2{margin:0 0 10px; font-size:18px} .p{margin:0 0 14px; color:var(--muted); line-height:1.55} .modeGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0} .mode{ border:1px solid var(--border); border-radius:12px; padding:12px; background:transparent; } .modeTitle{font-weight:900} .modeDesc{font-size:13px; color:var(--muted); margin-top:6px; line-height:1.4} .ctaRow{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px} .btn{ min-height:44px; padding:12px 14px; border-radius:8px; border:2px solid var(--border); background:transparent; font-weight:900; color:var(--text); cursor:pointer; } .btn.primary{ background:var(--text); color:var(--bg); border-color:var(--text); } .btn:hover,.navlink:hover{border-color:var(--muted)} .list{margin:0; padding-left:18px; color:var(--muted); line-height:1.6} .tiny{font-size:12px;color:var(--muted)} .footer{padding:20px 0 40px; text-align:center; color:var(--muted)} .divider{height:1px;background:var(--border); margin:14px 0} /* PLAY PAGE */ .playWrap{ display:grid; grid-template-columns: 1fr 340px; gap:14px; align-items:start; } .panel{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:14px; box-shadow:var(--shadow); } .sideTitle{font-weight:900; margin:0 0 10px} .badgeRow{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 12px} .badge{ font-size:12px; padding:8px 10px; border-radius:999px; border:1px solid var(--border); background:transparent; color:var(--muted); } .badge.good{border-color:rgba(106,170,100,.55)} .badge.warn{border-color:rgba(201,180,88,.55)} .board{ display:grid; gap:8px; justify-content:center; margin:10px auto 16px; padding:10px 0 0; width:100%; } .row{ display:grid; grid-template-columns: repeat(5, minmax(42px, 1fr)); gap:8px; width:min(420px, 100%); margin:0 auto; } /* Tiles */ .tile{ aspect-ratio: 1 / 1; border-radius:6px; border:2px solid var(--tileBorder); background:var(--tile); display:grid; place-items:center; font-weight:800; font-size:clamp(18px, 3.4vw, 28px); letter-spacing:.8px; user-select:none; text-transform:uppercase; color: var(--text); } .tile.filled{border-color:#878a8c} .tile.green{background:var(--green); border-color:var(--green); color:#fff} .tile.yellow{background:var(--yellow); border-color:var(--yellow); color:#fff} .tile.gray{background:var(--gray); border-color:var(--gray); color:#fff} .kbd{ display:grid; gap:8px; padding:8px 0 0; width:min(650px, 100%); margin:0 auto; } .krow{display:flex; gap:8px; justify-content:center} /* Keys */ .key{ flex:1; min-width:34px; min-height:44px; max-width:64px; padding:12px 10px; border-radius:6px; border:none; background: var(--border); font-weight:800; text-transform:uppercase; color: var(--text); cursor:pointer; user-select:none; } .key.wide{max-width:110px; flex:1.4} .key.green{background:var(--green); color:#fff} .key.yellow{background:var(--yellow); color:#fff} .key.gray{background:var(--gray); color:#fff} .key:active{transform: translateY(1px)} .key{transition: transform .06s ease} /* Toast */ .toast{ position:fixed; left:50%; transform:translateX(-50%); top:72px; background:var(--text); color:var(--bg); border:1px solid var(--text); border-radius:10px; padding:10px 12px; font-weight:900; opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:100; } .toast.show{opacity:1} /* Modals */ .modalBackdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; padding:18px; z-index:50; } .modalBackdrop.show{display:flex} .modal{ width:min(520px, 100%); border-radius:12px; border:1px solid var(--border); background:var(--panel); color:var(--text); padding:16px; } .modalTop{display:flex; justify-content:space-between; align-items:center; gap:10px} .xbtn{ width:44px;height:44px;border-radius:10px; border:2px solid var(--border); background:transparent; cursor:pointer; font-weight:900; color:var(--text); } .input{ width:100%; padding: 11px 12px; border-radius: 8px; border: 2px solid var(--border); background: transparent; color: var(--text); outline: none; } @media (max-width: 920px){ .hero{grid-template-columns:1fr} .playWrap{grid-template-columns:1fr} } @media (max-width: 680px){ .topbar{align-items:flex-start;gap:12px} .subtitle{display:none} .nav{justify-content:flex-end;flex-wrap:wrap;gap:6px} .navlink{padding:8px 9px} .navUser{width:100%;justify-content:flex-end} .playWrap{width:min(100% - 16px, 1000px);padding-top:10px} .panel{padding:10px} .board{gap:5px;margin-top:4px} .row{gap:5px} .kbd,.krow{gap:5px} .key{min-width:0;padding:12px 4px;font-size:12px} .key.wide{max-width:84px} .statsGrid{gap:8px} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } } /* STATS */ .statsGrid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; text-align:center; margin-top: 10px; } .statNum{font-weight:900; font-size: 22px;} .statLabel{color:var(--muted); font-size: 12px; margin-top: 4px;}