:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#1b2d36;background:#f6f8f8;font-size:16px}
*{box-sizing:border-box}body{margin:0;min-height:100dvh}.container{max-width:1120px;margin:0 auto;padding:0 22px}.topbar{background:#192c3b;color:#fff;padding-top:env(safe-area-inset-top,0px)}.brandline{height:82px;display:flex;align-items:center;gap:12px}.brandicon{width:53px;height:53px;display:grid;place-items:center;background:#f4bb54;color:#172a36;font-size:23px;font-weight:900;border-radius:16px}.brand{font-size:1.35rem;font-weight:850;letter-spacing:-.03em}.brand-sub{font-size:.75rem;color:#c7d6db;margin-top:2px}.header-label{margin-left:auto;font-size:.78rem;color:#bbcad1}.offline-status{font-size:.88rem;margin:18px 0;padding:11px 14px;border:1px solid #c6d4d9;border-radius:12px;background:#eaf0f2;color:#3b5660}.offline-status.ok{background:#e6f5ec;border-color:#88bca1;color:#23583c}.offline-status.warn{background:#fff5e5;border-color:#dfbb79;color:#765020}.hero{margin-top:15px;border-radius:25px;padding:46px 48px;min-height:285px;background:linear-gradient(110deg,#1d3d4d,#295a67);color:#fff;display:flex;justify-content:space-between;align-items:center;overflow:hidden;gap:25px}.hero>div:first-child{max-width:680px;position:relative;z-index:1}.eyebrow{color:#ffda94;font-size:.74rem;font-weight:800;letter-spacing:.16em}.hero h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.12;letter-spacing:-.04em;margin:12px 0}.hero p{line-height:1.65;color:#e4eef2;margin:0 0 22px;max-width:620px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border:0;border-radius:12px;background:#f4bb54;color:#17313e;padding:12px 18px;font-weight:850;min-height:48px;cursor:pointer;font-size:1rem}.btn.secondary{background:#173c4a;color:#fff}.btn:hover{filter:brightness(1.07)}.hero-art{position:relative;width:220px;height:210px;flex:none}.bubble{position:absolute;border-radius:21px;font-size:2.1rem;font-weight:900;display:grid;place-items:center;box-shadow:0 8px 15px #13242b50}.bubble.a{background:#f5bb54;color:#2a3342;width:103px;height:103px;left:4px;top:3px;transform:rotate(-13deg)}.bubble.b{background:#cfe8e3;color:#214755;width:92px;height:92px;right:0;top:22px;transform:rotate(15deg)}.bubble.c{background:#f3d6be;color:#2a4960;width:84px;height:84px;left:35px;bottom:0;transform:rotate(9deg)}.bubble.d{background:#e99689;color:#fff;width:85px;height:85px;right:7px;bottom:3px;transform:rotate(-9deg)}.sectionhead{margin:32px 0 19px}.sectionhead h2{font-size:1.65rem;letter-spacing:-.025em;margin:0 0 7px}.sectionhead p{margin:0;color:#56707c;line-height:1.5}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.gamecard{background:#fff;border:1px solid #dce7e9;border-radius:20px;padding:21px;box-shadow:0 5px 16px #1f3b440a;display:flex;flex-direction:column;align-items:flex-start}.gameicon{font-size:2.2rem;margin-bottom:6px}.pill{display:inline-block;background:#eaf0f1;color:#5d727b;border-radius:50px;font-size:.74rem;padding:6px 10px;font-weight:800}.ready-pill{background:#e1f4e9;color:#256042}.gamecard h3{font-size:1.17rem;margin:13px 0 7px;letter-spacing:-.02em}.gamecard p{font-size:.9rem;line-height:1.6;color:#526a74;margin:0 0 14px;flex-grow:1}.tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:17px}.tags span{background:#eff5f6;border-radius:9px;color:#426574;font-size:.73rem;padding:6px 8px}.gamecard .btn{align-self:stretch;font-size:.94rem}.info{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:29px 0 36px}.info>div{background:#e6eff1;border-radius:17px;padding:23px}.info h2{font-size:1.17rem;margin:0 0 7px}.info p{font-size:.91rem;line-height:1.7;color:#35525d;margin:0}footer{text-align:center;color:#687d86;font-size:.8rem;padding:22px env(safe-area-inset-right,10px) calc(24px + env(safe-area-inset-bottom,0px));border-top:1px solid #d9e4e7}
@media(max-width:850px){.cards{grid-template-columns:repeat(2,1fr)}.hero-art{width:160px;transform:scale(.8);transform-origin:center}}
@media(max-width:600px){.container{padding:0 max(16px,env(safe-area-inset-right,16px))}.brandline{height:74px}.header-label{display:none}.hero{padding:26px 22px;min-height:230px}.hero-art{display:none}.hero p{font-size:.9rem}.cards{grid-template-columns:1fr}.gamecard{padding:18px}.sectionhead h2{font-size:1.4rem}.info{grid-template-columns:1fr;margin-top:18px}.info>div{padding:19px}}

/* v0.2: описание аудитории каждой игры. Графические ассеты будут переработаны отдельно. */
[hidden]{display:none!important;}
.catalog-controls{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:18px 0 18px;padding:15px 18px;background:#e7eef0;border-radius:15px}
.catalog-controls>label{font-weight:800;color:#23404e}.catalog-controls select{min-height:43px;border:1px solid #a4bac3;border-radius:10px;background:#fff;color:#193849;padding:8px 12px;font:inherit;max-width:100%}
.level-hint{width:100%;font-size:.83rem;line-height:1.5;color:#4a6470;margin:0}
.audience{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 13px;width:100%}.audience>div{border-radius:11px;background:#f3f7f4;border:1px solid #d8e7dc;padding:8px 10px;flex:1 1 110px;min-width:0}.audience-key{display:block;font-size:.69rem;letter-spacing:.03em;color:#58726a;margin-bottom:3px}.audience strong{display:block;color:#224738;font-size:.84rem;line-height:1.4}
.gamecard h3{margin:12px 0 0}.gamecard .focus{font-size:.78rem;color:#49636c;line-height:1.5;margin:0 0 13px}.gamecard .focus span{font-weight:800;color:#234e58}
.coming-note{font-size:.81rem;color:#637883;margin-top:auto;padding-top:10px}.empty-games{background:#fff0d8;border:1px solid #ecc68d;padding:18px;border-radius:12px;color:#614219}
.level-explainer{background:#fff;border:1px solid #dce7e9;border-radius:17px;padding:21px 23px;margin-top:22px}.level-explainer h2{margin:0 0 15px;font-size:1.15rem}.level-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.level-items b{color:#1c3d4a}.level-items p{line-height:1.58;color:#536c75;margin:6px 0 0;font-size:.86rem}
@media(max-width:700px){.level-items{grid-template-columns:1fr;gap:11px}.catalog-controls{padding:13px}.catalog-controls select{width:100%}}