@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --bg:#f7f8fc; --surface:#fff; --ink:#172033; --muted:#7d879b; --line:#e5e9f1; --accent:#6558e8; --accent-soft:#eeedff; --correct:#42a884; --present:#d8a835; --absent:#aab2c1; --shadow:0 18px 60px rgba(36,45,78,.09); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:'DM Sans',sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { height:78px; display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; padding:0 32px; }
.brand { display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:21px; letter-spacing:-.6px; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:white; background:var(--accent); font-size:15px; box-shadow:0 6px 15px rgba(101,88,232,.28); }
.topnav { display:flex; align-items:center; gap:29px; color:var(--muted); font-size:13px; font-weight:600; }
.topnav a:hover, .footer a:hover { color:var(--accent); }
.icon-button { border:0; color:var(--muted); background:transparent; font-size:21px; cursor:pointer; padding:4px; }
.app-shell { width:min(100% - 40px, 700px); margin:45px auto 65px; }
.game-header { display:flex; justify-content:space-between; align-items:end; margin-bottom:25px; }
.eyebrow { margin:0 0 9px; color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:1.45px; font-weight:700; }
h1 { font:700 34px/1.05 'Space Grotesk',sans-serif; letter-spacing:-1.4px; margin:0; }
.new-game { border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink); padding:11px 14px; font:600 12px 'DM Sans',sans-serif; cursor:pointer; box-shadow:0 3px 8px rgba(30,40,65,.03); }
.new-game:hover { border-color:var(--accent); color:var(--accent); }
.new-game span { margin-left:7px; color:var(--accent); font-size:15px; }
.game-card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:25px 28px 28px; box-shadow:var(--shadow); }
.status-line { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); font-size:12px; font-weight:500; height:22px; margin-bottom:22px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--correct); box-shadow:0 0 0 4px rgba(66,168,132,.13); }
.board { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:min(100%,350px); margin:0 auto 28px; }
.tile { aspect-ratio:1; display:grid; place-items:center; border:2px solid var(--line); border-radius:10px; color:var(--ink); font:700 25px 'Space Grotesk',sans-serif; transition:background .2s, border .2s; }
.tile.filled { border-color:#aeb6c7; transform:scale(.98); }
.tile.correct, .tile.present, .tile.absent { color:white; border-color:transparent; }
.tile.correct { background:var(--correct); }.tile.present { background:var(--present); }.tile.absent { background:var(--absent); }
.tile.reveal { animation:flip .45s ease both; }
@keyframes flip { 0%{transform:rotateX(0)} 48%{transform:rotateX(90deg)} 100%{transform:rotateX(0)} }
.keyboard { display:flex; flex-direction:column; gap:8px; max-width:560px; margin:auto; }
.key-row { display:flex; gap:6px; justify-content:center; }
.key { border:0; border-radius:7px; background:#e9edf4; color:#4c586c; height:43px; min-width:32px; flex:1; max-width:43px; padding:0 4px; font:700 11px 'DM Sans',sans-serif; cursor:pointer; transition:filter .15s, transform .1s; }
.key:hover { filter:brightness(.96); }.key:active { transform:translateY(1px); }.key.wide { max-width:66px; font-size:10px; }
.key.correct, .key.present, .key.absent { color:white; }.key.correct { background:var(--correct); }.key.present { background:var(--present); }.key.absent { background:var(--absent); }
.tip-panel { margin-top:20px; padding:18px 20px; border:1px solid #e4e1ff; border-radius:15px; background:var(--accent-soft); display:flex; align-items:center; gap:13px; }
.tip-icon { width:31px; height:31px; flex:none; display:grid; place-items:center; border-radius:9px; color:var(--accent); background:#fff; }.tip-panel strong { font-size:13px; }.tip-panel p { margin:3px 0 0; color:#73758f; font-size:11px; line-height:1.4; }.tip-panel a { margin-left:auto; white-space:nowrap; color:var(--accent); font-size:12px; font-weight:700; }.tip-panel a span { font-size:16px; margin-left:4px; }
.footer { max-width:1180px; margin:auto; padding:0 32px 28px; display:flex; gap:22px; color:#a0a8b8; font-size:11px; }.footer span { margin-right:auto; }
.toast { position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); opacity:0; pointer-events:none; color:white; background:#252d40; border-radius:9px; padding:12px 17px; font-size:12px; font-weight:600; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
body.dark { --bg:#171b28; --surface:#222839; --ink:#f5f6fb; --muted:#a5aec0; --line:#384156; --accent-soft:#302d59; --absent:#596276; }.dark .key { background:#3a4357; color:#dae0ec; }.dark .tip-panel p { color:#b6b7d0; }.dark .tip-icon { background:#41405f; }
@media (max-width:560px) { .topbar { height:68px; padding:0 20px; }.topnav { gap:15px; }.topnav a { display:none; }.app-shell { width:min(100% - 24px, 700px); margin-top:28px; }.game-header { align-items:center; }.eyebrow { font-size:9px; }.game-header h1 { font-size:27px; }.new-game { padding:10px 11px; }.game-card { padding:19px 12px 22px; border-radius:18px; }.board { gap:6px; margin-bottom:23px; }.tile { border-radius:8px; font-size:21px; }.keyboard { gap:6px; }.key-row { gap:4px; }.key { height:42px; min-width:0; font-size:10px; }.key.wide { font-size:9px; }.tip-panel { align-items:flex-start; padding:15px; }.tip-panel a { display:none; }.footer { padding:0 20px 22px; } }