:root { color-scheme: dark; --ink:#f5f2f7; --muted:#aaa3ad; --night:#100c13; --panel:#1b1420; --line:#3c3042; --lime:#c9f45b; --violet:#c78cf1; --pink:#ff789e; --display:"Arial Black","Helvetica Neue",Arial,sans-serif; --body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { min-width:280px; background:var(--night); }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 82% 5%,rgba(199,140,241,.12),transparent 30rem),var(--night); font-family:var(--body); line-height:1.5; }
a { color:inherit; } button { color:inherit; font:inherit; }
.site-header,main,footer { width:min(1060px,calc(100% - 40px)); margin-inline:auto; }
.site-header { display:flex; align-items:center; justify-content:space-between; min-height:78px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:850; text-decoration:none; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; color:var(--night); background:var(--lime); border-radius:9px; font-family:var(--display); }
.site-header p { margin:0; color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.site-header p span,.eyebrow { color:var(--violet); }
.intro { display:grid; grid-template-columns:1fr minmax(260px,400px); gap:60px; align-items:end; padding:60px 0 38px; }
.intro>p { margin-bottom:3px; color:var(--muted); }
.eyebrow { margin:0 0 10px; font-size:.72rem; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-family:var(--display); font-size:clamp(3.4rem,8vw,6.4rem); line-height:.86; letter-spacing:-.07em; }
.game-shell { max-width:760px; margin-inline:auto; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:17px; }
.difficulty { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.difficulty button { display:grid; gap:1px; min-height:58px; padding:10px 15px; text-align:left; background:var(--panel); border:0; cursor:pointer; }
.difficulty button[aria-pressed="true"] { color:var(--night); background:var(--violet); }
.difficulty strong { font-size:.82rem; }.difficulty span { color:var(--muted); font-size:.66rem; }.difficulty button[aria-pressed="true"] span { color:#3b214c; }
.scorebar { display:grid; grid-template-columns:1fr 2fr 1fr; gap:14px; align-items:center; padding:16px 20px 10px; }
.scorebar>div { display:grid; }.scorebar__right { text-align:right; }
.scorebar span { color:var(--muted); font-size:.61rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
.scorebar strong { color:var(--lime); font:850 1.6rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.scorebar p { margin:0; color:var(--muted); font-size:.75rem; text-align:center; }
.game-meta { display:flex; align-items:center; justify-content:space-between; margin:0 20px 16px; padding-top:10px; border-top:1px solid var(--line); }
.game-meta p { margin:0; color:var(--muted); font-size:.72rem; }.game-meta strong { color:var(--ink); }
.game-meta button { min-height:40px; padding:0 14px; background:transparent; border:1px solid #5b4c63; border-radius:8px; font-weight:800; cursor:pointer; }
.game-meta button:hover,.game-meta button:focus-visible { color:var(--night); background:var(--lime); border-color:var(--lime); }
.board { display:grid; grid-template-columns:repeat(var(--columns),1fr); gap:10px; max-width:620px; margin:0 auto; padding:0 20px 24px; }
.card { position:relative; display:grid; aspect-ratio:4/5; padding:0; place-items:center; color:var(--ink); background:repeating-linear-gradient(135deg,#33243b 0 8px,#291e30 8px 16px); border:1px solid #594362; border-radius:11px; font-family:var(--display); font-size:clamp(1.5rem,6vw,3rem); cursor:pointer; transform-style:preserve-3d; transition:transform 160ms ease,background 160ms ease; touch-action:manipulation; }
.card::after { content:"Q"; color:rgba(255,255,255,.18); font-size:1rem; }
.card:hover,.card:focus-visible { border-color:var(--violet); outline:none; transform:translateY(-2px); }
.card--visible,.card--matched { background:#f0e7f5; border-color:var(--violet); color:#3f2054; transform:rotateY(180deg); }
.card--visible::after,.card--matched::after { content:none; }
.card--matched { color:#16200b; background:var(--lime); border-color:var(--lime); }
.card:disabled { opacity:1; cursor:default; }
.board[data-difficulty="challenge"] { gap:7px; }.board[data-difficulty="challenge"] .card { font-size:clamp(1.2rem,4vw,2.2rem); }
.rules { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,9vw,110px); padding:90px 0; }
.rules h2 { margin:0; font-family:var(--display); font-size:clamp(2rem,4vw,3.8rem); line-height:.98; letter-spacing:-.05em; }
.rules>p { margin:0; color:var(--muted); }
footer { display:flex; justify-content:space-between; padding:28px 0 42px; color:var(--muted); border-top:1px solid var(--line); font-size:.8rem; }
footer a { color:var(--ink); font-weight:750; text-decoration:none; } footer p { margin:0; }
@media(max-width:680px){.site-header,main,footer{width:min(100% - 24px,620px)}.site-header{min-height:66px}.intro{grid-template-columns:1fr;gap:18px;padding:42px 0 30px}.difficulty button{padding:9px}.game-shell{border-radius:12px}.board{gap:7px;padding:0 12px 18px}.scorebar{padding-inline:12px}.game-meta{margin-inline:12px}.rules{grid-template-columns:1fr;gap:22px;padding:72px 0 82px}}
@media(max-width:430px){.difficulty strong{font-size:.72rem}.scorebar{grid-template-columns:1fr 1fr}.scorebar p{grid-column:1/-1;grid-row:2}.game-meta{align-items:flex-start;gap:8px}.game-meta p{max-width:60%}.board{gap:5px}.board[data-difficulty="challenge"]{gap:4px}.card{border-radius:7px}.rules{padding-top:68px}footer{display:block}footer p{margin-top:6px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}