/* Szpila: wybór trybu — kryptowalutydlapoczatkujacych.pl/tryby/ */
.m{margin:0;font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:#0e2a2b;background:#f3f6f5;font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
.m *{box-sizing:border-box}
.m p{margin:0;text-wrap:pretty}
.m h1,.m h2,.m h3{margin:0;text-wrap:balance}
.m :focus-visible{outline:3px solid #0f6b5c;outline-offset:2px}
.m .wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px),4vw);padding-right:max(16px,env(safe-area-inset-right,0px),4vw)}
@media (min-width:1200px){.m .wrap{padding-left:48px;padding-right:48px}}
.m .mono{font-family:"Martian Mono",ui-monospace,monospace}
.m .modebar{background:#0e2a2b;color:#e6f0ee;position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.m .modebar .wrap{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;padding-block:10px}
.m .modebar .home{color:#ffffff;font-family:"Schibsted Grotesk",sans-serif;font-weight:800;text-decoration:none;margin-right:8px}
.m .modebar .lbl{font-family:"Martian Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#a9bfbc}
.m .modes{display:flex;gap:6px;flex-wrap:wrap}
.m .modes button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #2f5556;background:transparent;color:#e6f0ee;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.m .modes button.on{background:#e6f0ee;color:#0e2a2b;border-color:#e6f0ee}
.m .modebar .hint{font-size:13px;color:#a9bfbc;margin-left:auto}
@media (max-width:760px){.m .modebar .hint,.m .modebar .lbl{display:none}}
.m .pick{padding-block:clamp(48px,7vw,96px)}
.m .pick h1{font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(40px,6vw,76px);font-weight:900;line-height:1.02;letter-spacing:-.015em;max-width:16ch}
.m .pick .lead{font-size:clamp(17px,1.6vw,20px);color:#3c5455;max-width:58ch;margin-top:16px}
.m .doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;margin-top:40px}
.m .door{display:flex;flex-direction:column;gap:14px;text-align:left;border-radius:22px;padding:24px;cursor:pointer;font-family:inherit;font-size:17px;line-height:1.5;border:2px solid transparent;min-height:330px;transition:transform .15s}
.m .door:hover{transform:translateY(-3px)}
.m .door .who{font-size:14px;opacity:.85}
.m .door .go{font-weight:700;margin-top:auto}
.m .door.a{background:#ffffff;border-color:#0e2a2b;color:#0e2a2b;box-shadow:8px 8px 0 #0e2a2b}
.m .door.a .h{font-family:"Schibsted Grotesk",sans-serif;font-size:32px;font-weight:900;letter-spacing:-.01em;line-height:1.05}
.m .door.b{background:#1a3aa8;color:#ffffff}
.m .door.b .h{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:40px;line-height:1}
.m .door.c{background:#ffffff;border-color:#111111;color:#111111;box-shadow:0 8px 0 #ff5a36}
.m .door.c .h{font-family:"Rubik",sans-serif;font-size:32px;font-weight:900;line-height:1.05}
.m .mini{border-radius:14px;padding:12px;display:grid;gap:8px;font-size:13px}
.m .door.a .mini{background:#f3f6f5;border:1px dashed #d3dcda}
.m .door.b .mini{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25)}
.m .door.c .mini{background:#fff4ef;border:2px solid #111}
.m .mini .row{display:flex;gap:6px;flex-wrap:wrap}
.m .mini .row span{border-radius:8px;padding:3px 8px;font-weight:600}
.m .door.a .mini .row span{background:#e2efea;color:#0f6b5c}
.m .door.b .mini .row span{background:rgba(255,255,255,.16)}
.m .mini .serif{font-family:"Instrument Serif",serif;font-style:italic;font-size:22px}
.m .mini .xrow{display:flex;justify-content:space-between;font-weight:700}
.m .xpbar{display:block;height:10px;border-radius:99px;background:#ffe2d8;border:2px solid #111;overflow:hidden}
.m .xpbar i{display:block;height:100%;background:#ff5a36;transition:width .3s}
.m .note{margin-top:22px;font-size:14px;color:#5a6d6e}
.m .ta{padding-block:clamp(40px,6vw,80px);background-color:#f3f6f5;background-image:linear-gradient(#d3dcda 1px,transparent 1px),linear-gradient(90deg,#d3dcda 1px,transparent 1px);background-size:32px 32px}
.m .tag-a{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#0f6b5c;font-weight:600}
.m .ta h2{font-family:"Schibsted Grotesk",sans-serif;font-size:clamp(36px,5vw,60px);font-weight:900;letter-spacing:-.015em;line-height:1.04;max-width:18ch;margin-top:10px}
.m .ta h2 em{font-style:normal;color:#0f6b5c}
.m .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:14px;margin-top:32px}
.m .tile{background:#ffffff;border:1px solid #d3dcda;border-radius:16px;padding:20px;display:grid;gap:8px;align-content:start;text-decoration:none;color:#0e2a2b}
.m .tile:hover{border-color:#0f6b5c}
.m .tile .k{font-family:"Martian Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#0f6b5c;font-weight:600}
.m .tile h3{font-family:"Schibsted Grotesk",sans-serif;font-size:22px;font-weight:800}
.m .btnA{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:12px;background:#0f6b5c;color:#fff;font-weight:700;text-decoration:none}
.m .tb{background:#1a3aa8;color:#ffffff;font-family:"Hanken Grotesk",system-ui,sans-serif;padding-block:clamp(48px,7vw,96px);min-height:80vh}
.m .tb .q{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(48px,7.4vw,96px);line-height:.98;letter-spacing:-.01em;max-width:14ch}
.m .tb .sub{font-size:clamp(17px,1.6vw,20px);color:#c9d5ff;margin-top:14px;max-width:52ch}
.m .opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;margin-top:36px}
.m .opt{display:flex;gap:14px;align-items:center;min-height:76px;padding:14px 18px;border-radius:18px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#ffffff;font-family:inherit;font-size:19px;font-weight:600;text-align:left;cursor:pointer}
.m .opt:hover{background:rgba(255,255,255,.16);border-color:#ffe45c}
.m .opt .ic{width:42px;height:42px;border-radius:12px;background:#ffe45c;color:#1a3aa8;display:grid;place-items:center;flex:none;font-weight:800;font-size:18px}
.m .path{margin-top:30px;display:grid;gap:14px;max-width:720px}
.m .pstep{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:18px;padding:16px 18px}
.m .pstep .no{width:44px;height:44px;border-radius:50%;background:#ffe45c;color:#1a3aa8;display:grid;place-items:center;font-weight:800;font-size:18px}
.m .pstep b{font-size:19px;display:block}
.m .pstep .d{color:#c9d5ff;font-size:15px}
.m .pstep .t{font-size:14px;color:#c9d5ff;white-space:nowrap}
@media (max-width:520px){.m .pstep{grid-template-columns:44px 1fr}.m .pstep .t{display:none}}
.m .bcta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;align-items:center}
.m .btnB{display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;border-radius:999px;background:#ffe45c;color:#13286f;font-weight:800;font-size:18px;text-decoration:none;text-align:center}
.m .back{background:none;border:0;color:#c9d5ff;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;padding:10px 0;text-decoration:underline}
.m .care{background:#ffffff;color:#13286f;border-radius:18px;padding:16px 18px;font-size:16px;max-width:720px;margin-top:22px}
.m .tc{background:#ffffff;color:#111111;font-family:"Rubik",system-ui,sans-serif;padding-block:clamp(40px,6vw,80px)}
.m .tag-c{font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#d63d1c}
.m .tc h2{font-family:"Rubik",sans-serif;font-weight:900;font-size:clamp(36px,5vw,60px);line-height:1.02;max-width:18ch;margin-top:8px}
.m .tc .sub{font-size:clamp(17px,1.6vw,20px);color:#3d3d3d;margin-top:12px;max-width:56ch}
.m .cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px;margin-top:32px;align-items:start}
.m .player{border:3px solid #111;border-radius:22px;padding:22px;display:grid;gap:14px;box-shadow:0 8px 0 #111;background:#fff4ef}
.m .lvl{display:flex;align-items:center;gap:14px}
.m .lvl .badge{width:64px;height:64px;border-radius:18px;background:#ff5a36;color:#fff;display:grid;place-items:center;font-weight:900;font-size:30px;border:3px solid #111}
.m .lvl b{font-size:26px;font-weight:900;display:block;line-height:1.1}
.m .lvl span{font-size:14px;color:#3d3d3d}
.m .xp{display:grid;gap:6px}
.m .xp .xpbar{height:16px}
.m .xp .row{display:flex;justify-content:space-between;font-size:14px;font-weight:700}
.m .ladder{display:flex;gap:6px;flex-wrap:wrap}
.m .ladder span{font-size:13px;font-weight:700;border:2px solid #111;border-radius:999px;padding:3px 10px;background:#fff}
.m .ladder span.on{background:#111;color:#fff}
.m .reward{font-size:14px;border-top:2px dashed #111;padding-top:10px}
.m .missions{display:grid;gap:12px}
.m .mission{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border:3px solid #111;border-radius:18px;padding:14px 16px;background:#fff}
.m .mission b{font-size:18px;display:block}
.m .mission span{font-size:14px;color:#3d3d3d}
.m .mission button{min-height:48px;padding:0 16px;border-radius:12px;border:3px solid #111;background:#2f6fe0;color:#fff;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 4px 0 #111}
.m .mission button:disabled{background:#e9e9e9;color:#555;box-shadow:none;cursor:default}
.m .mission.done{background:#effaf0}
.m .badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px;margin-top:22px}
.m .bdg{border:3px solid #111;border-radius:16px;padding:14px;text-align:center;display:grid;gap:6px;justify-items:center;background:#fff}
.m .bdg .ico{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:3px solid #111;background:#ffd43b}
.m .bdg.lock{opacity:.45;background:#f4f4f4}
.m .bdg.lock .ico{background:#dcdcdc}
.m .bdg b{font-size:14px;line-height:1.25}
.m .reset{background:none;border:0;color:#555;text-decoration:underline;font-family:inherit;font-size:14px;cursor:pointer;padding:6px 0}
.m .foot{background:#0e2a2b;color:#a9bfbc;font-size:14px}
.m .foot .wrap{padding-block:28px calc(28px + env(safe-area-inset-bottom,0px))}
.preview-badge{position:fixed;left:max(10px,env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:50;font:600 11px/1 "Martian Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;background:#b42318;color:#fff;border-radius:999px;padding:7px 11px;pointer-events:none;opacity:.92}
