@font-face{font-family:Figtree;src:url(../fonts/figtree-latin.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;src:url(../fonts/figtree-latin-ext.woff2) format('woff2');font-weight:300 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--forest:#1c442a;--forest-d:#133020;--blue:#007cb7;--teal:#6fabb1;--brown:#3e2a1f;--cream:#f5f3ee;--ink:#1d2621;--muted:#5f6b64;--line:#e4e0d6;--gold:#C9A45C;--r:18px;--sh:0 2px 8px rgba(19,48,32,.18);
--sat:env(safe-area-inset-top);--sar:env(safe-area-inset-right);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
header.top{position:sticky;top:0;z-index:20;background:#fff;display:flex;align-items:center;gap:12px;padding:calc(12px + var(--sat)) calc(14px + var(--sar)) 12px calc(14px + var(--sal));box-shadow:0 1px 0 var(--line)}
.mbtn{width:52px;height:52px;border:0;border-radius:14px;background:var(--forest);display:grid;place-items:center;cursor:pointer;flex:none}
.mbtn svg{width:24px;height:24px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand svg{width:44px;height:44px;flex:none}
.brand b{font-size:21px;font-weight:800;letter-spacing:.06em;color:var(--forest);white-space:nowrap}
.brand small{display:block;font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--muted);margin-top:1px}
main.start{padding:16px 14px calc(24px + var(--sab));max-width:720px;margin:0 auto}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{display:flex;flex-direction:column;background:#fff;border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh);border:1px solid rgba(0,0,0,.04)}
.tile .pic{aspect-ratio:3/2;background:#2c3a30 center/cover no-repeat}
.tile .pic.med{background:linear-gradient(180deg,#f8f6f1,#ece7dc);display:grid;place-items:center}
.tile .pic.med svg{width:56%;height:auto;max-height:84%}
.tile .nm{min-height:52px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:16.5px;padding:8px 6px;text-align:center}
.tile .nm i{font-style:normal;color:var(--blue);font-size:14px}
.tile.soon{opacity:.62}.tile.soon .nm small{display:block;font-weight:500;font-size:11.5px;color:var(--muted)}
.tile.wide{grid-column:1/-1}.tile.wide .pic{aspect-ratio:2/1}
h2.sec{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin:22px 4px 10px}
.drawer{position:fixed;inset:0;z-index:50;display:flex}.drawer[hidden]{display:none}
.drawer .pan{width:min(84vw,330px);background:#fff;height:100%;padding:calc(16px + var(--sat)) 14px 16px;overflow:auto;box-shadow:4px 0 24px rgba(0,0,0,.2)}
.drawer .bg{flex:1;background:rgba(19,48,32,.35)}
.drawer a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 8px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:600}
.drawer a svg{width:34px;height:34px;flex:none}.drawer a.soon{color:var(--muted);font-weight:500}
.drawer h4{margin:16px 8px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.foot{font-size:12.5px;color:var(--muted);line-height:1.45;margin:20px 4px 0}
/* v3 – start jak w Bono: kafelki miejsc, pod nimi ogólne medaliony */
main.start .tiles{gap:14px}main.start .tile .nm{font-size:17px}
.tiles.gen{margin-top:14px}
.drawer .foot{margin:22px 8px 0}