@font-face { font-family:"Cinzel Decorative"; font-weight:700; font-display:swap; src:url(fonts/cinzel-decorative-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"IM Fell English"; font-weight:400; font-display:swap; src:url(fonts/im-fell-english-latin-400-normal.woff2) format("woff2"); }
:root { color-scheme: dark; --bg:#0d0b09; --panel:#16110d; --fg:#eadfc4; --gold:#d9a441; --gold-dark:#7a5a1e; --link:#f0c56a; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--fg); font:400 1.4rem/1.7 "IM Fell English","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",Georgia,serif; }
header { padding:clamp(32px,7vw,88px) 20px clamp(16px,3vw,40px); text-align:center; border-bottom:2px solid var(--gold-dark); }
h1 { margin:0 0 .2em; font:700 clamp(2rem,7vw,4.2rem)/1.2 "Cinzel Decorative",Georgia,serif; color:var(--gold); letter-spacing:.04em; text-wrap:balance; }
header p { margin:0; font-size:clamp(1.25rem,2.6vw,1.6rem); }
.games { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,3vw,40px); max-width:64rem; margin:0 auto; padding:clamp(20px,5vw,64px) clamp(14px,4vw,40px); }
.card { display:block; box-sizing:border-box; min-width:0; padding:clamp(16px,3vw,40px) clamp(10px,2vw,28px); background:var(--panel); border:2px solid var(--gold-dark); color:var(--fg); text-align:center; text-decoration:none; transition:border-color .15s, background-color .15s; }
.card h2 { margin:0 0 .4em; font:700 clamp(1.1rem,3.4vw,2.2rem)/1.25 "Cinzel Decorative",Georgia,serif; color:var(--gold); letter-spacing:.04em; overflow-wrap:break-word; }
.card p { margin:0; font-size:clamp(1rem,2.2vw,1.4rem); }
.card:focus-visible { outline:4px solid var(--link); outline-offset:2px; border-color:var(--link); }
@media (hover:hover) { .card:hover { border-color:var(--link); background:#1d1610; } }