:root { color-scheme:light; --paper:#f4f0e7; --ink:#1c2430; --muted:#747a7d; --line:#ded9ce; --mint:#c4e77b; --gold:#f4bd55; --white:#fffdf8; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.55 "Segoe UI",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.site-shell { width:min(1160px,calc(100% - 48px)); margin:auto; }
.topbar { height:86px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:.09em; }.brand-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:10px 10px 10px 3px; background:var(--ink); color:var(--mint); font:italic 19px Georgia,serif; letter-spacing:0; }.brand-light { color:#8b8a82; font-weight:500; margin-left:4px; }
.lesson-chip { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--line); border-radius:99px; background:#faf8f2; color:#686f70; font:10px Consolas,monospace; letter-spacing:.07em; }.live-dot { width:7px; height:7px; background:#a8cc5c; border-radius:50%; box-shadow:0 0 0 3px #a8cc5c2e; }
.hero { min-height:385px; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:34px; padding:48px 6px 42px; }.eyebrow { margin:0 0 11px; color:#89887e; font:500 10px Consolas,monospace; letter-spacing:.16em; }.eyebrow i { display:inline-block; width:38px; height:1px; margin:0 0 3px 9px; background:#aca99e; }
h1,h2,h3,p { margin-top:0; }.hero h1 { margin:0; font-size:clamp(42px,6vw,70px); line-height:.99; letter-spacing:-.07em; font-weight:800; }.hero h1 span { color:#91b64e; }.hero-text { max-width:420px; margin:21px 0 23px; color:#62696b; font-size:15px; line-height:1.8; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:43px; padding:0 17px; border:0; border-radius:10px; color:var(--ink); font-size:12px; font-weight:800; transition:transform .15s,box-shadow .15s; }.button:hover,.game-card:hover .button { transform:translateY(-2px); box-shadow:0 7px 15px #1c24301c; }.button-dark { background:var(--ink); color:#fffdf8; }.button-mint { background:var(--mint); }.button-gold { background:var(--gold); }
.hero-art { height:300px; position:relative; overflow:hidden; border:1px solid #e3ddcf; border-radius:47% 53% 42% 58% / 54% 46% 54% 46%; background:#ebe6d8; transform:rotate(-2deg); }.sun-disc { position:absolute; width:195px; height:195px; top:48px; left:50%; transform:translateX(-50%); border-radius:50%; background:#c7e37c; }.orbit { position:absolute; z-index:1; left:50%; top:50%; border:1px solid #a8ae8b; border-radius:50%; transform:translate(-50%,-50%) rotate(-25deg); }.orbit-one { width:330px; height:128px; }.orbit-two { width:273px; height:212px; transform:translate(-50%,-50%) rotate(36deg); border-color:#c5b593; }.float-word { position:absolute; z-index:2; display:grid; place-items:center; padding:9px 14px; border:1px solid #e2dccf; border-radius:9px; background:var(--white); box-shadow:0 5px 12px #353a2610; font-weight:800; transform:rotate(3deg); }.word-kobieta { top:53px; left:14%; color:#58496a; }.word-jablko { right:9%; bottom:70px; transform:rotate(-4deg); color:#536b32; }.word-je { left:17%; bottom:46px; padding:8px 17px; background:var(--gold); transform:rotate(-7deg); font-size:19px; }.hero-stamp { position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; width:111px; height:111px; left:50%; top:50%; transform:translate(-50%,-50%) rotate(9deg); border:1px dashed #718843; border-radius:50%; color:#475a2d; font-family:Georgia,serif; }.hero-stamp i { font-size:13px; }.hero-stamp b { font-size:20px; }.spark { position:absolute; z-index:2; color:#b38e48; font-size:21px; }.spark-one { top:43px; right:26%; }.spark-two { left:35%; bottom:43px; font-size:15px; color:#7c6990; }
.games-section { padding-bottom:35px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:12px 0 16px; }.section-heading .eyebrow { margin-bottom:5px; }.section-heading h2 { margin:0; font-size:25px; letter-spacing:-.05em; }.round-tag,.tag { display:inline-flex; align-items:center; border-radius:99px; font:10px Consolas,monospace; letter-spacing:.08em; }.round-tag { padding:8px 11px; border:1px solid var(--line); color:#77776e; }
.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.game-card { position:relative; display:flex; min-height:375px; flex-direction:column; overflow:hidden; padding:20px 22px 19px; border:1px solid var(--line); border-radius:17px; background:var(--white); transition:transform .18s,box-shadow .18s; }.game-card:hover { transform:translateY(-3px); box-shadow:0 12px 24px #39372912; }.match-card { background:#f9f8f1; }.gato-card { background:#f4f0f5; border-color:#ded6e2; }.card-topline { display:flex; align-items:center; justify-content:space-between; }.game-number { color:#8e8c82; font:11px Consolas,monospace; }.tag { padding:7px 10px; }.tag-mint { background:#e7f2d0; color:#586f33; }.tag-gold { background:#f6e4bd; color:#805d23; }
.match-illustration { position:relative; height:132px; display:flex; align-items:center; justify-content:center; gap:14px; }.mini-tile { min-width:92px; padding:13px 15px; text-align:center; border:1px solid #dedbd0; border-radius:10px; background:#fffef9; box-shadow:0 6px 0 #e8e4d9; font-size:14px; font-weight:800; transform:rotate(-4deg); }.mini-tile-b { background:#e7f1d4; transform:rotate(4deg) translateY(13px); }.match-burst { position:absolute; left:50%; top:43px; z-index:1; display:grid; place-items:center; width:31px; height:31px; transform:translateX(-50%); border-radius:50%; background:var(--gold); font-weight:800; }
.game-card h3 { margin:0 0 6px; font-size:23px; letter-spacing:-.05em; }.game-card>p { min-height:48px; margin:0; color:#737878; font-size:12px; line-height:1.7; }.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid #e8e4db; }.game-detail { color:#77786f; font:10px Consolas,monospace; }.card-bottom .button { min-height:39px; padding:0 13px; font-size:10px; }
.gato-illustration { height:132px; position:relative; display:grid; place-items:center; }.cat-face { position:relative; z-index:1; width:86px; height:74px; border-radius:46% 46% 48% 48%; background:#e6a75b; box-shadow:inset -8px -7px #ce8545; }.ear { position:absolute; top:-13px; width:32px; height:35px; border-radius:8px 18px 3px 13px; background:#e6a75b; transform:rotate(45deg); }.ear-left { left:0; }.ear-right { right:0; transform:rotate(45deg) scaleX(-1); }.cat-eye { position:absolute; top:28px; width:7px; height:9px; border-radius:50%; background:#292d32; }.eye-left { left:24px; }.eye-right { right:24px; }.cat-nose { position:absolute; left:50%; top:43px; width:8px; height:6px; transform:translateX(-50%); border-radius:50%; background:#9c5966; }.cat-mouth { position:absolute; left:50%; top:49px; width:15px; height:8px; transform:translateX(-50%); border-bottom:1.5px solid #5b3938; border-radius:50%; }.whisker { position:absolute; top:47px; width:20px; height:1px; background:#735b4d; }.whisker-left { left:3px; transform:rotate(10deg); box-shadow:0 6px #735b4d; }.whisker-right { right:3px; transform:rotate(-10deg); box-shadow:0 6px #735b4d; }.gato-word { position:absolute; z-index:2; top:24px; right:20%; padding:5px 12px; border-radius:8px; background:#fffdf8; box-shadow:0 4px 0 #e9e2d6; color:#6a5277; font-weight:800; transform:rotate(7deg); }.gato-spark { position:absolute; top:23px; left:22%; color:#c08d39; font-size:20px; }
.reading-card { background:#f1f4ec; border-color:#dbe1d2; }.tag-reading { background:#e2e9d7; color:#596d43; }.button-reading { background:#d7e7bd; }.reading-illustration { height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; }.reading-illustration span { max-width:90%; padding:9px 13px; border:1px solid #e2e4d8; border-radius:8px; background:#fffefa; box-shadow:0 4px 0 #e5e8dc; color:#536249; font-size:13px; font-weight:800; }.reading-illustration span:last-child { transform:rotate(2deg); }.reading-illustration i { color:#82916d; font:20px Georgia,serif; line-height:10px; }
.lesson-strip { display:flex; align-items:center; gap:13px; margin:17px 0 40px; padding:14px 17px; border:1px solid var(--line); border-radius:13px; background:#eeeadf; }.strip-icon { display:grid; flex:0 0 34px; place-items:center; width:34px; height:34px; border-radius:11px; background:#dcebbd; color:#557035; font-size:18px; }.strip-copy { display:flex; flex:1; min-width:0; flex-direction:column; }.strip-copy strong { font-size:11px; }.strip-copy small,.strip-count small { color:#7d807b; font-size:10px; }.strip-count { display:flex; flex-direction:column; align-items:flex-end; border-left:1px solid #d7d1c5; padding-left:15px; }.strip-count b { font-size:17px; }.footer { display:flex; justify-content:space-between; padding:17px 0 25px; border-top:1px solid var(--line); color:#89887e; font:9px Consolas,monospace; letter-spacing:.08em; }.load-error { margin:14px 0; padding:13px; border:1px solid #e5aaa2; border-radius:10px; background:#fff2ef; color:#883c36; font-size:12px; }
a:focus-visible { outline:3px solid #81a942; outline-offset:3px; }
@media(max-width:760px) { .site-shell { width:min(100% - 30px,600px); }.hero { grid-template-columns:1fr; gap:14px; padding-top:38px; }.hero-art { height:240px; }.game-grid { grid-template-columns:1fr; }.game-card { min-height:360px; }.section-heading { align-items:flex-start; flex-direction:column; }.round-tag { align-self:flex-start; } }
@media(min-width:961px) { .game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.game-card { min-height:410px; padding:18px; } }
@media(min-width:761px) and (max-width:960px) { .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:460px) { .site-shell { width:calc(100% - 24px); }.topbar { height:70px; }.hero { padding:32px 2px 30px; }.hero h1 { font-size:48px; }.hero-art { height:208px; }.sun-disc { width:145px; height:145px; top:31px; }.section-heading h2 { font-size:22px; }.game-card { padding:17px; }.card-bottom { align-items:flex-start; flex-direction:column; }.card-bottom .button { width:100%; }.lesson-strip { align-items:flex-start; padding:12px; gap:9px; }.strip-count { align-self:center; margin-left:auto; padding-left:9px; }.footer { font-size:8px; } }