/* Crickva styles (from the v3 mockup). */
@import url(/fonts/fonts.css);

:root{--bg:#eef2ec;--card:#fff;--ink:#17201a;--muted:#5f6b63;--line:#d9e1d8;--pitch:#2d6a4f;--pitch-bg:#e1eee6;--ball:#b3262d;--ball-bg:#f7e3e3;--board:#14181a;--digit:#f4d35e;--sky:#2f6fa8;--sky-bg:#e2edf7;--warn:#9a6a00;--warn-bg:#fbf0d4;--plum:#6b4c9a;--plum-bg:#ece6f5}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.mono{font-family:"Chivo Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.note-top{background:var(--board);color:#cfd6d0;font-size:13.5px;padding:8px 16px;text-align:center}
.note-top b{color:var(--digit)}.note-top button{color:var(--digit);text-decoration:underline;font-size:13.5px}
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.rail{background:var(--board);color:#e8ece9;padding:22px 14px;position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.01em;margin:0 6px 18px}
.ballic{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e0505a,var(--ball) 60%,#7d161c);position:relative;flex:none;display:inline-block}
.ballic::after{content:"";position:absolute;inset:3px 13px;border-left:2px dashed #f3d6d6;border-right:2px dashed #f3d6d6;border-radius:40%}
.rail button{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;color:#b9c3bc;font-weight:600;text-align:left}
.rail button.on{background:#232a2d;color:#fff}
.rail .add{margin-top:auto;background:var(--digit);color:var(--board);justify-content:center;font-weight:800}
main{padding:28px 32px 120px;max-width:1120px;width:100%;min-width:0}
.tabs{display:none}
@media (max-width:860px){
  .app{grid-template-columns:1fr}.rail{display:none}
  main{padding:18px 16px 110px}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--board);padding:8px 4px calc(env(safe-area-inset-bottom) + 8px);z-index:10}
  .tabs button{color:#9aa59e;font-size:11.5px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px}
  .tabs button span{font-size:19px}.tabs button.on{color:#fff}
  .tabs .add span{background:var(--digit);color:var(--board);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:800;margin-top:-4px}
}
h1{font-size:28px;letter-spacing:-.02em;margin:0 0 4px}
.sub{color:var(--muted);margin:0 0 18px}
h2{font-size:18px;margin:28px 0 10px;display:flex;justify-content:space-between;align-items:baseline}
h2 small{font-size:13px;color:var(--muted);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.grid2,.grid3{grid-template-columns:1fr}}
.who{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.av{width:54px;height:54px;border-radius:50%;background:var(--pitch);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.role{display:inline-flex;gap:6px;align-items:center;background:var(--plum-bg);color:var(--plum);font-weight:700;font-size:13.5px;padding:4px 10px;border-radius:999px}
.board{background:var(--board);border-radius:18px;padding:18px;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:860px){.board{grid-template-columns:repeat(3,1fr);padding:12px;gap:8px}}
.cell{background:#0d1012;border-radius:10px;padding:10px 8px;text-align:center}
.cell b{display:block;font-family:"Chivo Mono",monospace;font-size:30px;color:var(--digit);line-height:1.1}
@media (max-width:860px){.cell b{font-size:24px}}
.cell small{color:#9aa59e;font-size:11.5px;letter-spacing:.04em}
/* highlights: swipe across */
.hl{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.hl::-webkit-scrollbar{display:none}
.hcard{scroll-snap-align:start;border-radius:18px;padding:16px;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.hcard .k{font-size:12.5px;font-weight:700;opacity:.85}
.hcard b{font-size:19px;line-height:1.25;display:block;margin-top:4px}
.hcard .big{font-family:"Chivo Mono",monospace;font-size:34px;line-height:1;margin-top:10px}
.hcard p{margin:6px 0 0;font-size:13.5px;opacity:.9}
.h1c{background:linear-gradient(135deg,#1f5f45,#2d6a4f)}.h2c{background:linear-gradient(135deg,#7d161c,#b3262d)}.h3c{background:linear-gradient(135deg,#1d4e7a,#2f6fa8)}.h4c{background:linear-gradient(135deg,#4a3470,#6b4c9a)}.h5c{background:linear-gradient(135deg,#14181a,#33403a)}
.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.kv div{background:var(--bg);border-radius:10px;padding:8px;text-align:center}
.kv b{display:block;font-family:"Chivo Mono",monospace;font-size:19px}.kv small{color:var(--muted);font-size:11.5px}
.hbar{display:grid;grid-template-columns:90px 1fr 44px;gap:8px;align-items:center;font-size:13.5px;margin-top:7px}
.hbar i{display:block;height:10px;border-radius:5px;background:var(--pitch)}
.hbar span:last-child{text-align:right;font-weight:700;font-family:"Chivo Mono",monospace}
.trend{display:flex;align-items:flex-end;gap:4px;height:120px;margin-top:10px}
.trend div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;position:relative}
.trend i{display:block;width:100%;border-radius:4px 4px 1px 1px;min-height:2px}
.trend small{font-size:10px;color:var(--muted)}
.trend .now i{outline:2px solid var(--digit)}
.legend{display:flex;gap:12px;font-size:12.5px;color:var(--muted);margin-top:8px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.insight{display:flex;gap:12px;align-items:flex-start}
.insight .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px;flex:none;background:var(--pitch-bg)}
.insight b{display:block}.insight p{margin:2px 0 0;color:var(--muted);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--pitch-bg);color:var(--pitch)}
.chip.guess{background:var(--warn-bg);color:var(--warn)}.chip.miss{background:#eef0ee;color:var(--muted)}.chip.sky{background:var(--sky-bg);color:var(--sky)}.chip.red{background:var(--ball-bg);color:var(--ball)}.chip.plum{background:var(--plum-bg);color:var(--plum)}
.season{font-weight:800;font-size:15px;margin:22px 0 8px;display:flex;justify-content:space-between;color:var(--muted)}
.mrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;width:100%;text-align:left}
.mrow .opp{font-weight:700}
.mrow .fig{font-family:"Chivo Mono",monospace;text-align:right;font-size:14px;color:var(--muted);white-space:nowrap}
.mrow .fig b{color:var(--ink);font-size:15px}
.res{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:12px;font-weight:800;margin-right:6px;vertical-align:1px}
.res.W{background:var(--pitch);color:#fff}.res.L{background:var(--ball);color:#fff}.res.T,.res.D{background:#c8cfca;color:var(--ink)}.res.x{background:#eef0ee;color:var(--muted)}
/* improve: focus idea, tiles, milestone path, medals */
.focus{background:linear-gradient(135deg,#e1eee6,#f3f7f1);border:1px solid #cfe0d4;border-radius:20px;padding:18px;display:flex;gap:16px}
.focus .pic{width:64px;height:64px;border-radius:16px;background:#fff;display:grid;place-items:center;font-size:32px;flex:none}
.focus .k{font-size:13px;color:var(--muted)}.focus b{display:block;font-size:20px;margin:2px 0 4px}.focus p{margin:0;color:#33413a}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
.tile{border-radius:18px;padding:14px;min-height:150px;display:flex;flex-direction:column;text-align:left}
.tile .e{font-size:26px}.tile b{font-size:15.5px;margin-top:8px;line-height:1.25}.tile p{margin:4px 0 0;font-size:13px;color:#46524b;flex:1}
.tile small{font-weight:700;font-size:12px;margin-top:8px;color:var(--muted)}
.t1{background:#e1eee6}.t2{background:#f7e3e3}.t3{background:#e2edf7}.t4{background:#fbf0d4}.t5{background:#ece6f5}.t6{background:#eef0ee}
.path{display:flex;align-items:flex-start;position:relative;margin:6px 0 4px;overflow-x:auto;padding:4px 2px}
.path .ln{position:absolute;left:30px;right:30px;top:26px;height:3px;background:var(--line)}
.node{flex:1;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;text-align:center}
.node i{width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:19px}
.node.now i{background:var(--pitch);color:#fff;border-color:var(--pitch);font-size:13px;font-weight:800}
.node small{font-size:12px;color:var(--muted);line-height:1.3}.node b{font-size:12.5px}
.medals{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.medal{text-align:center;font-size:12.5px;line-height:1.3}
.coin{width:64px;height:64px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-size:26px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),0 4px 10px -6px rgba(0,0,0,.4)}
.g{background:radial-gradient(circle at 35% 30%,#ffe8a3,#d9a52c 60%,#a8781a)}.s{background:radial-gradient(circle at 35% 30%,#f4f6f8,#b9c2cc 60%,#8a949e)}.b{background:radial-gradient(circle at 35% 30%,#f6cfa8,#c27a3e 60%,#8d5426)}
.lock{background:#e6ebe6;filter:grayscale(1);opacity:.55}
.medal small{display:block;color:var(--muted)}
.prog{height:5px;background:#e6ebe6;border-radius:3px;overflow:hidden;margin:4px 10px 0}.prog i{display:block;height:100%;background:var(--pitch)}
/* timeline */
.tl{position:relative;margin-left:8px;padding-left:26px;border-left:3px solid var(--line)}
.ty{font-weight:800;font-size:22px;margin:18px 0 8px;position:relative}
.ty::before{content:"";position:absolute;left:-36px;top:8px;width:16px;height:16px;border-radius:50%;background:var(--board);border:3px solid var(--bg)}
.ev{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:8px;display:flex;gap:12px;align-items:flex-start;position:relative}
.ev::before{content:"";position:absolute;left:-33px;top:18px;width:10px;height:10px;border-radius:50%;background:var(--line)}
.ev .e{font-size:22px;line-height:1.2}.ev b{display:block}.ev p{margin:2px 0 0;color:var(--muted);font-size:14px}
.ev.big{background:var(--board);color:#fff;border-color:var(--board)}.ev.big p{color:#b9c3bc}
.ev .ph{width:84px;height:62px;border-radius:10px;object-fit:cover;flex:none}
/* community */
.feed .item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.feed .item:first-child{border-top:0}
.feed .dot{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--bg);font-size:17px}
.feed b{font-weight:650}.feed small{display:block;color:var(--muted);font-size:12.5px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:#e3e9e3;border-radius:12px;padding:3px;gap:3px}
.seg button{border-radius:9px;padding:8px 4px;font-weight:700;font-size:14px;color:var(--muted)}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sw{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.sw:first-child{border-top:0}.sw small{display:block;color:var(--muted);font-size:13px}
.tog{width:46px;height:28px;border-radius:999px;background:#cfd6d0;position:relative;flex:none}.tog::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.tog.on{background:var(--pitch)}.tog.on::after{left:21px}
/* grounds + photos */
.ground{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;text-align:left}
.gph{width:58px;height:58px;border-radius:12px;background:linear-gradient(135deg,#cfe3c3,#9cc39a);display:grid;place-items:center;font-size:22px;overflow:hidden}
.gph img{width:100%;height:100%;object-fit:cover}
.ground .al{font-size:13px;color:var(--muted)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.photos img,.photos .addph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}
.addph{border:2px dashed #b9c6bc;display:grid;place-items:center;color:var(--muted);font-weight:700;font-size:13px;text-align:center;background:var(--card);cursor:pointer}
/* import */
.drop{border:2px dashed #b9c6bc;border-radius:16px;padding:22px;text-align:center;background:var(--card)}
.drop b{display:block;font-size:17px}
.src{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:860px){.src{grid-template-columns:1fr 1fr}}
.src div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px}
.src b{display:block;font-size:14.5px}
textarea.sc{width:100%;min-height:170px;border:1.5px solid var(--line);border-radius:12px;padding:10px;font-family:"Chivo Mono",monospace;font-size:12.5px;background:var(--card)}
.found{background:var(--pitch-bg);border-radius:14px;padding:12px 14px;margin-top:10px}
.stat{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line);font-size:15px}
.stat:first-child{border-top:0}.stat span:last-child{font-weight:700}
.meter{height:8px;background:#e6ebe6;border-radius:4px;overflow:hidden;margin-top:6px}.meter i{display:block;height:100%;background:var(--pitch)}
.q{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}.q:first-child{border-top:0}
.q .btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn{border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px;background:var(--board);color:#fff}
.btn.ghost{background:var(--card);color:var(--ink);border:1.5px solid var(--line)}.btn.ok{background:var(--pitch)}
.btn.wide{width:100%;padding:13px;font-size:16px;border-radius:12px}
.more{display:grid;gap:8px}.more button{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left;font-weight:700}
.more button small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.hidden{display:none!important}
/* sheets */
.scrim{position:fixed;inset:0;background:rgba(10,14,12,.45);z-index:30;display:flex;align-items:flex-end;justify-content:center}
@media (min-width:861px){.scrim{align-items:center}}
.sheet{background:var(--bg);width:100%;max-width:560px;max-height:92vh;overflow-y:auto;border-radius:22px 22px 0 0;padding:18px 18px 28px}
@media (min-width:861px){.sheet{border-radius:22px}}
.sheet h3{margin:0 0 2px;font-size:21px}
.raw{font-family:"Chivo Mono",monospace;font-size:13px;background:#0d1012;color:#c9d2cc;border-radius:10px;padding:8px 10px;margin:8px 0 12px}
.field{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.field label{color:var(--muted);font-size:14px}
.field input,.field select{border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card);width:100%;min-width:0}
.wx{background:var(--sky-bg);border-radius:14px;padding:12px 14px;margin-top:12px}.wx b{color:var(--sky)}
.steppers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.step{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center}
.step b{display:block;font-family:"Chivo Mono",monospace;font-size:22px}.step small{color:var(--muted);font-size:12px}
.step .pm{display:flex;justify-content:center;gap:6px;margin-top:4px}.step .pm button{width:30px;height:30px;border-radius:8px;background:var(--pitch-bg);color:var(--pitch);font-weight:800}
.foot{font-size:13px;color:var(--muted);margin-top:14px}
/* sign-up */
.ob{position:fixed;inset:0;z-index:50;background:var(--board);color:#fff;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.obc{width:100%;max-width:440px}
.obc h2{font-size:28px;margin:0 0 6px;display:block;letter-spacing:-.02em}
.obc p{color:#b9c3bc;margin:0 0 18px}
.obc .dots{display:flex;gap:6px;margin-bottom:22px}.obc .dots i{height:4px;flex:1;border-radius:2px;background:#2e3639}.obc .dots i.on{background:var(--digit)}
.obc input{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid #2e3639;background:#0d1012;color:#fff;font-size:16px}
.obc .lbl{font-size:13.5px;color:#9aa59e;font-weight:700;margin:14px 0 6px}
.code{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.code input{text-align:center;font-family:"Chivo Mono",monospace;font-size:22px;padding:12px 0}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.roles button{background:#0d1012;border:1.5px solid #2e3639;border-radius:14px;padding:14px;text-align:left;color:#fff}
.roles button b{display:block}.roles button small{color:#9aa59e;font-size:12.5px}
.roles button.on{border-color:var(--digit);background:#1d1a0c}
.obbig{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 0 20px}
.obbig .ballic{width:76px;height:76px}.obbig .ballic::after{inset:7px 32px;border-width:3px}
.obbig h2{font-size:40px;margin-top:16px}
.ybtn{background:var(--digit);color:var(--board);border-radius:12px;padding:14px;font-weight:800;width:100%;font-size:16px;margin-top:18px}
.lbtn{color:#b9c3bc;text-decoration:underline;margin-top:12px;display:block;width:100%;text-align:center;font-size:14.5px}
.opt{display:flex;gap:12px;align-items:center;background:#0d1012;border:1.5px solid #2e3639;border-radius:14px;padding:14px;margin-bottom:8px;width:100%;text-align:left;color:#fff}
.opt b{display:block}.opt small{color:#9aa59e}
.opt.on{border-color:var(--digit)}

/* ===== design pass: Crickva's own look ===== */
:root{--turf:#1d5c41;--turf2:#236a4b;--chalk:#f6f8f4}
.disp{font-family:"Big Shoulders Display",system-ui,sans-serif;letter-spacing:.01em}
h1{font-family:"Big Shoulders Display",system-ui,sans-serif;font-weight:800;font-size:38px;letter-spacing:.005em;line-height:1}
h2{font-family:"Big Shoulders Display",system-ui,sans-serif;font-weight:800;font-size:23px;letter-spacing:.01em}
.brand{font-family:"Big Shoulders Display",system-ui,sans-serif;font-size:27px;font-weight:900;letter-spacing:.02em}
/* the hero: mown stripes, a faint popping crease, the scoreboard set into the turf */
.hero{position:relative;overflow:hidden;border-radius:26px;padding:22px 22px 20px;color:#fff;background:repeating-linear-gradient(90deg,var(--turf) 0 70px,var(--turf2) 70px 140px);box-shadow:inset 0 -60px 80px -40px rgba(0,0,0,.35)}
.hero::before{content:"";position:absolute;right:-30px;top:26px;width:240px;height:150px;border:3px solid rgba(255,255,255,.22);border-right:0;border-radius:2px}
.hero::after{content:"";position:absolute;right:120px;top:26px;bottom:-10px;width:3px;background:rgba(255,255,255,.22)}
.hero .who{position:relative;z-index:1;margin-bottom:18px}
.hero h1{color:#fff;font-size:52px;margin:0}
@media (max-width:860px){.hero h1{font-size:40px}.hero{padding:18px 14px 14px;border-radius:22px}}
.hero .av{background:var(--chalk);color:var(--turf);box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.hero .role{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)}
.hero .board{position:relative;z-index:1;background:rgba(10,13,12,.82);box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
.fd{display:inline-block;transform-origin:50% 50% -10px}
.flip .fd{animation:flip .55s cubic-bezier(.2,.7,.3,1.25) both;animation-delay:calc(var(--c) * 110ms + var(--i) * 55ms)}
@keyframes flip{from{transform:rotateX(-95deg);opacity:0}}
/* highlights: stitched seam on the ball card, a gentle tilt as they pass the middle */
.hl{perspective:900px;padding:6px 2px 12px}
.hcard{transition:transform .25s ease;will-change:transform;position:relative;overflow:hidden;box-shadow:0 14px 30px -18px rgba(0,0,0,.55)}
.hcard .big{font-family:"Big Shoulders Display",system-ui,sans-serif;font-weight:900;font-size:52px;letter-spacing:.01em}
.hcard b{font-family:"Big Shoulders Display",system-ui,sans-serif;font-size:25px;font-weight:800;letter-spacing:.01em}
.h2c::after{content:"";position:absolute;top:-20px;bottom:-20px;right:38px;width:14px;border-left:2px dashed rgba(255,255,255,.35);border-right:2px dashed rgba(255,255,255,.35);transform:rotate(14deg)}
.h1c::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 40px,transparent 40px 80px)}
.hcard>*{position:relative;z-index:1}
/* a ball rolls along the milestone path to now */
.path{position:relative}
.rollball{position:absolute;top:15px;left:0;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e0505a,var(--ball) 60%,#7d161c);z-index:2;opacity:0}
.rollball::after{content:"";position:absolute;inset:2px 9px;border-left:1.5px dashed #f3d6d6;border-right:1.5px dashed #f3d6d6;border-radius:40%}
.node.done i{background:var(--pitch-bg);border-color:var(--pitch)}
/* badges spin when tapped */
.coin{cursor:pointer;transition:transform .2s}
.coin.spin{animation:spin 1s cubic-bezier(.2,.7,.3,1)}
@keyframes spin{to{transform:rotateY(720deg)}}
/* training: like tummy time */
.train{background:linear-gradient(160deg,#16314f,#1f4a72);color:#fff;border-radius:22px;padding:18px;position:relative;overflow:hidden}
.train::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 22px)}
.train>*{position:relative}
.train .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.train .top b{font-family:"Big Shoulders Display",system-ui,sans-serif;font-size:26px;font-weight:800;display:block;line-height:1.05}
.train .top small{color:#b8cbe0;font-size:13.5px}
.train .mins{font-family:"Big Shoulders Display",system-ui,sans-serif;font-weight:900;font-size:46px;line-height:1;text-align:right}
.train .mins small{display:block;font-family:inherit;font-size:13px;font-weight:600;color:#b8cbe0}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;height:74px;margin:14px 0 6px;align-items:end}
.wk div{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:3px}
.wk i{display:block;width:100%;border-radius:6px 6px 2px 2px;background:#f4d35e;min-height:3px;transition:height .45s cubic-bezier(.2,.8,.3,1.2)}
.wk i.none{background:rgba(255,255,255,.18)}
.wk small{font-size:11px;color:#b8cbe0}.wk .today small{color:#fff;font-weight:800}
.wk i.pop{animation:pop .5s cubic-bezier(.2,.8,.3,1.4)}
@keyframes pop{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
.qadd{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
@media (max-width:860px){.qadd{grid-template-columns:repeat(2,1fr)}}
.qadd button{background:rgba(255,255,255,.12);color:#fff;border-radius:12px;padding:10px 6px;font-weight:700;font-size:14px;transition:transform .12s}
.qadd button:active{transform:scale(.96)}
.train .row2{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:13.5px;color:#b8cbe0}
.train .row2 button{color:#fff;font-weight:700;text-decoration:underline}
.trchips{display:flex;flex-wrap:wrap;gap:6px}
.trchips button{border:1.5px solid var(--line);border-radius:999px;padding:7px 12px;font-weight:600;font-size:14px;background:var(--card)}
.trchips button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--board);color:#fff;border-radius:999px;padding:10px 16px;font-weight:700;font-size:14px;z-index:60;animation:toast 2.4s ease forwards;white-space:nowrap}
@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}10%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.focus .act{margin-top:10px;background:var(--pitch);color:#fff;border-radius:10px;padding:8px 12px;font-weight:700;font-size:14px}
.weeks{display:flex;align-items:flex-end;gap:8px;height:120px;margin-top:10px}
.weeks div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px;font-size:11px;color:var(--muted)}
.weeks i{display:block;width:100%;background:var(--sky);border-radius:6px 6px 2px 2px;min-height:3px}
@media (prefers-reduced-motion:reduce){.flip .fd,.coin.spin,.wk i.pop,.toast{animation:none}.hcard{transition:none}}

/* ===== v3 ===== */
.railsub{display:flex;flex-direction:column;margin:0 0 6px 26px;border-left:1px solid #2e3639}
.railsub button{font-size:14px;padding:6px 12px;color:#9aa59e}
.kick{display:block;font-size:13px;font-weight:700;color:#cfe6d8;margin-bottom:2px}
.board.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:860px){.board.four{grid-template-columns:repeat(2,1fr)}}
.dl{font-size:11px;margin-left:3px}.dl.up{color:#3ccf8e}.dl.down{color:#ff7a7a}
.card .dl.up,.st .dl.up,.chg .dl.up{color:#1f8a57}.card .dl.down,.st .dl.down,.chg .dl.down{color:#c0392b}
.career{position:relative;z-index:1;display:block;margin-top:12px;color:#d6efe1;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.lastm{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;width:100%;text-align:left}
.lastm .opp{font-size:18px}.lmfig{font-family:"Big Shoulders Display",system-ui;font-weight:800;font-size:24px;text-align:right}
.sbars{display:flex;gap:4px;align-items:flex-end;height:96px}
.sbars div{flex:1;display:flex;gap:2px;align-items:flex-end;height:100%}
.sbars i{flex:1;border-radius:4px 4px 1px 1px}.sbars i.r{background:var(--digit)}.sbars i.w{background:var(--ball)}
.big1{min-height:190px;margin-top:4px}
.share{position:absolute;right:12px;top:12px;background:rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px;z-index:2}
.nextm{display:flex;gap:14px;align-items:center;margin-top:14px}.nextm b{display:block;font-size:16px}
.firstm{background:var(--card);border:2px dashed #b9c6bc;border-radius:20px;padding:20px;margin-top:14px;text-align:center}
.firstm b{font-family:"Big Shoulders Display",system-ui;font-size:28px;font-weight:800;display:block}.firstm p{color:var(--muted);margin:4px 0 14px}
.ghostprev{display:grid;gap:10px;opacity:.55;filter:saturate(.6);pointer-events:none}
.banner{display:flex;gap:10px;align-items:flex-start;background:var(--sky-bg);border-radius:14px;padding:12px 14px;margin:0 0 14px;font-size:14.5px}
.subtabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{flex:none;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 12px;font-weight:700;font-size:13.5px}
.subtabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.subtabs.big button{font-size:15px;padding:8px 15px}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);background:#e3e9e3;border-radius:12px;padding:3px;gap:3px;max-width:480px;margin-bottom:12px}
.seg3.two{grid-template-columns:1fr 1fr;max-width:320px;margin-bottom:0}
.seg3 button{border-radius:9px;padding:8px 4px;font-weight:700;font-size:14px;color:var(--muted)}
.seg3 button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:16px}
table.st{border-collapse:collapse;width:100%;font-size:14px;white-space:nowrap}
.st th{font-size:12px;color:var(--muted);text-align:right;padding:10px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.st td{text-align:right;padding:9px 10px;border-bottom:1px solid #eef1ee;font-family:"Chivo Mono",monospace;font-size:13.5px}
.st th:first-child,.st td:first-child{text-align:left;position:sticky;left:0;background:var(--card);font-family:inherit;z-index:1}
.st tr[data-goseason]{cursor:pointer}.st tr[data-goseason]:hover td{background:#f6f9f6}
.st td.best{background:#fbf0d4;font-weight:700}
.st tr.miss td{color:var(--muted);font-family:inherit;font-style:italic;background:repeating-linear-gradient(135deg,#fafbfa 0 8px,#f2f4f2 8px 16px)}
.st tr.miss td:first-child{background:#f2f4f2}
.st tr.tot td{border-top:2px solid var(--ink);font-weight:700}
.st tr.few td{opacity:.7}
.st td.barc{width:28%;min-width:90px}.st td.barc i{display:block;height:9px;border-radius:5px}
.linkish{color:var(--pitch);font-weight:700;text-decoration:underline;font-size:14px}
.splitctl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.splitctl label{font-weight:700;font-size:14px;display:flex;gap:8px;align-items:center}
.splitctl select{border:1.5px solid var(--line);border-radius:10px;padding:7px 10px;background:var(--card);font-weight:600}
.cmp{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:6px 14px}
.cmph,.cmpr{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid #eef1ee}
.cmph select{border:1.5px solid var(--line);border-radius:10px;padding:7px 8px;font-weight:700;min-width:0}
.cmpr span{color:var(--muted);font-size:14px}.cmpr b{font-family:"Chivo Mono",monospace;text-align:center;padding:4px;border-radius:8px}
.cmpr b.win{background:var(--pitch-bg);color:var(--pitch)}
#map{height:460px;border-radius:18px;border:1px solid var(--line);overflow:hidden;z-index:0}
@media (max-width:860px){#map{height:380px}}
.journey{display:flex;gap:10px;align-items:center;margin-top:10px}.journey input{flex:1;accent-color:var(--pitch)}.journey b{min-width:110px;text-align:right;font-size:14px}
.clubc{text-align:left;width:100%}
.kv.six{grid-template-columns:repeat(6,1fr)}@media (max-width:860px){.kv.six{grid-template-columns:repeat(3,1fr)}}
.bigin{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:18px;background:var(--card);font-weight:600}
.bigin.need{border-color:var(--ball);box-shadow:0 0 0 3px var(--ball-bg)}
.lblr{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;margin:14px 0 6px}
.mini{border:1.5px solid var(--line);border-radius:999px;padding:4px 10px;font-size:13px;font-weight:700;background:var(--card)}
.mini.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.off{opacity:.35;pointer-events:none}
.steppers.three{grid-template-columns:repeat(3,1fr)}
.saved{text-align:center;margin-bottom:10px}.saved .tick{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--pitch);color:#fff;font-size:26px;animation:pop .5s cubic-bezier(.2,.8,.3,1.4)}
.chg{display:grid;grid-template-columns:1fr auto 20px;gap:8px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.newbest{background:var(--warn-bg);border-radius:12px;padding:10px 12px;margin-top:8px;font-weight:700}
.storycard{width:240px;height:426px;margin:0 auto;border-radius:22px;padding:20px;color:#fff;display:flex;flex-direction:column;background:repeating-linear-gradient(90deg,#1d5c41 0 40px,#236a4b 40px 80px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.sc-top{display:flex;gap:8px;align-items:center;font-family:"Big Shoulders Display",system-ui;font-weight:900;font-size:22px}.sc-top .ballic{width:24px;height:24px}
.sc-big{margin-top:auto;font-family:"Big Shoulders Display",system-ui;font-weight:900;font-size:68px;line-height:.95;color:var(--digit)}
.sc-cap{font-size:17px;font-weight:700;margin-top:8px}.sc-name{font-size:13px;opacity:.8;margin-top:14px}

/* swipe rows run to the right edge on phones, with the normal gap restored once you reach the end */
@media (max-width:860px){
  .subtabs,.hl{margin-right:-16px;padding-right:0}
  .subtabs::after{content:"";flex:0 0 10px}
  .hl{display:flex;gap:12px}.hl>*{flex:0 0 min(280px,82%)}.hl::after{content:"";flex:0 0 4px}
}

/* ===== app (beyond the mockup) ===== */
.offline{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top) + 8px);background:var(--board);color:#fff;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;z-index:40}
.oberr{color:#ff9a9a;min-height:1.2em;margin:8px 0 0!important;font-size:14px}
.devcode{background:#1d1a0c;border:1.5px dashed var(--digit);border-radius:12px;padding:10px 12px;color:#fff!important}
.devcode b{color:var(--digit);font-family:"Chivo Mono",monospace;font-size:18px;letter-spacing:.1em}
.codein{font-family:"Chivo Mono",monospace;font-size:26px!important;letter-spacing:.3em;text-align:center}
.moredet{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 12px 10px}
.moredet summary{cursor:pointer;font-weight:700;padding:8px 0;color:var(--muted);font-size:14.5px}
.moredet .pair input{border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--card);width:100%;min-width:0}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--digit);outline-offset:2px}

/* swipe rows: start in line with the page, run off the right edge, and end with the normal gap */
.hl,.subtabs{margin-right:-32px;padding-right:0}
.hl{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory}.hl>*{flex:0 0 min(300px,82%);scroll-snap-align:start}
.hl::after{content:"";flex:0 0 20px}.subtabs::after{content:"";flex:0 0 26px}
@media (max-width:860px){.hl,.subtabs{margin-right:-16px}.hl::after{flex-basis:4px}.subtabs::after{flex-basis:10px}}

/* import */
.filebtn{display:flex;align-items:center;justify-content:center;cursor:pointer}
.filebtn input{position:absolute;width:1px;height:1px;opacity:0}
.sheet h4{margin:18px 0 8px;font-size:15px}
.iqs{display:grid;gap:8px}
.iq p{margin:0 0 10px;line-height:1.45}
.iq .trchips button{text-align:left}
.icheck td:nth-child(2),.icheck th:nth-child(2){white-space:normal;min-width:120px;text-align:left}
.icheck tr.nomatch td{background:var(--warn-bg)}
.icheck tr.offwhy td{font-size:12.5px;color:var(--muted);padding-top:0;text-align:left;white-space:normal}
.st td small{display:block;font-size:10px;color:var(--muted);font-weight:400}
.icheck td:nth-child(2){font-family:inherit;font-size:12.5px;line-height:1.3;color:var(--muted)}

/* match view */
.sheet.mv{padding-top:14px}
.mv-h{background:var(--board);color:#fff;border-radius:20px;padding:16px 16px 14px}
.mv-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:#b9c3bc}
.mv-h h2{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:40px;line-height:1;margin:8px 0 4px;color:#fff}
.mv-sub{color:#c9d2cc;font-size:13.5px;margin:0}
.mv-res{flex:none;font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;background:var(--pitch);color:#fff}
.mv-res.L{background:var(--ball)}.mv-res.N{background:#59605c}
.mv-figs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.mv-fig{background:#1f2629;border-radius:14px;padding:10px 12px}
.mv-fig small{display:block;color:#9aa59e;font-size:11.5px;font-weight:700}
.mv-fig b{font-family:"Chivo Mono",monospace;color:var(--digit);font-size:28px;display:block;margin:2px 0}
.mv-fig span{color:#c9d2cc;font-size:12.5px}
.mv-field{margin:10px 2px 0;color:#c9d2cc;font-size:13px}
.mv-check{display:flex;gap:8px;align-items:center;background:var(--warn-bg);border-radius:14px;padding:10px 12px;margin-top:10px;font-size:13.5px}
.mv-check button{margin-left:auto;flex:none}
.mv-place{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:16px;padding:12px;margin-top:10px}
.mv-pin{width:44px;height:44px;border-radius:12px;background:var(--pitch-bg);display:grid;place-items:center;font-size:22px;flex:none}
.mv-place b{display:block}.mv-place small{color:var(--muted);font-size:12.5px}
.mv-place a{margin-left:auto;font-weight:700;font-size:13px;color:var(--pitch);white-space:nowrap}
.mv-wx{display:flex;gap:10px;align-items:center;background:var(--sky-bg);color:#1d3f5f;border-radius:16px;padding:12px;margin-top:8px;min-height:44px}
.mv-wx.wet{background:#dfe6ee}
.mv-ic{font-size:28px;flex:none}
.mv-wx b{display:block}.mv-wx small{font-size:12.5px;opacity:.85}
.mv-hours{display:flex;gap:3px;margin-top:6px;align-items:flex-end;height:22px}
.mv-hours i{flex:1;background:var(--sky);border-radius:2px;opacity:.85}
.mv-note{background:var(--card);border-radius:16px;padding:12px;margin-top:8px}
.mv-note h4{margin:0 0 6px;font-size:13px;color:var(--muted)}
.mv-note p{margin:0;font-size:14px;line-height:1.45}
.mv-bullet{display:flex;gap:8px;font-size:14px;line-height:1.4;margin:4px 0}
.mv-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.mv-credit{font-size:11px;color:var(--muted);margin:10px 0 0;text-align:center}

/* timeline, links */
.golink{display:flex;gap:12px;align-items:center;text-align:left}
.golink>span{font-size:26px}
.golink b{display:block}.golink small{color:var(--muted);font-size:12.5px}
.tys{font-size:13px;font-weight:600;margin-left:6px}
.ty.miss{color:var(--muted);font-size:17px}
button.ev{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
button.stat{width:100%;font:inherit;color:inherit;background:none;border:0;padding-left:0;padding-right:0;cursor:pointer;text-align:left}

/* v4 layout: line icons, sidebar sections, quiet links */
.ic{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
.ic.sm{width:16px;height:16px}.ic.xs{width:14px;height:14px}
.rail .add{margin-top:auto;display:flex;gap:8px}
.rail .quiet{display:flex;flex-direction:column;margin-top:8px}
.rail .quiet button{font-size:13.5px;color:#8f9a93;padding:6px 12px;gap:8px}
.rail .quiet button.on{color:#fff;background:none}
.railsub button.on{color:#fff;background:none}
.newdot{width:7px;height:7px;border-radius:50%;background:var(--digit);display:inline-block;margin-left:2px}
.tabs button{gap:3px}
.tabs .add span{width:38px;height:38px}
.tabs .add .ic{width:20px;height:20px}
.seg{margin:4px 0 14px}
.hero button.av{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:20px;position:relative}
.hero button.av:after{content:"";position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;border-radius:50%;background:var(--chalk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d3b2c' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v3M12 18v3M3 12h3M18 12h3'/%3E%3C/svg%3E") center/11px no-repeat;box-shadow:0 0 0 2px var(--turf)}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 8px}
.sec h2{margin:0}
.seclink{font-size:13.5px;font-weight:700;color:var(--pitch);background:none;border:0;padding:0;cursor:pointer}
.nextline,.newline{display:flex;align-items:center;gap:10px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-top:10px;font:inherit;font-size:14px;text-align:left;color:inherit;cursor:pointer}
.nextline b{flex:1}.nextline small{color:var(--muted);font-weight:600}
.newline{background:#fbf3d6;border-color:#efdfa6}.newline span{flex:1}
.meter2{width:72px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;flex:none}.meter2 i{display:block;height:100%;background:var(--pitch)}
/* matches */
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:0 12px;color:var(--muted);margin:0 0 10px}
.search input{border:0;outline:0;background:none;font:inherit;font-size:16px;padding:11px 0;flex:1;color:var(--ink);min-width:0}
.search:focus-within{border-color:var(--pitch)}
.clubsel{font:inherit;font-size:14px;padding:7px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--card);margin:0 0 6px}
.mrow2{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.mrow2>div:first-child{min-width:0}
.mrow2 b{display:flex;align-items:center;gap:6px;font-size:15px}
.mrow2 small{display:flex;flex-wrap:wrap;align-items:center;gap:4px;color:var(--muted);font-size:12.5px;margin-top:3px}
.mrow2 small.club{margin-top:1px;font-size:12px;opacity:.85}
.mrow2 .f{font-family:"Chivo Mono",monospace;font-size:13.5px;text-align:right;white-space:nowrap}
.mrow2 .res{font-size:11px;padding:1px 6px}
/* story */
.tl2{position:relative;padding-left:22px}
.tl2:before{content:"";position:absolute;left:6px;top:8px;bottom:0;width:2px;background:var(--line)}
.yr{font-family:"Big Shoulders Display",system-ui,sans-serif;font-weight:900;font-size:26px;margin:16px 0 6px;position:relative}
.yr:before{content:"";position:absolute;left:-21px;top:9px;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.yr small{font-family:system-ui,-apple-system,sans-serif;font-size:12.5px;font-weight:600;color:var(--muted);margin-left:6px;letter-spacing:0}
.yr.miss{font-size:19px;color:var(--muted)}.yr.miss:before{background:var(--line)}
.m2{display:flex;gap:10px;align-items:center;width:100%;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:6px 0;text-align:left;font:inherit;color:inherit}
button.m2{cursor:pointer}
.m2 b{display:block;font-size:14.5px}.m2 small{color:var(--muted);font-size:12.5px}
.kicon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.kicon.w{background:var(--ball-bg);color:var(--ball)}.kicon.r{background:var(--warn-bg);color:var(--warn)}.kicon.c{background:var(--pitch-bg);color:var(--pitch)}.kicon.s{background:var(--sky-bg);color:var(--sky)}
.mv-bullet{align-items:center}.mv-bullet .kicon{width:24px;height:24px;border-radius:7px}
.node i .ic{width:16px;height:16px}
.tile .e .ic{width:24px;height:24px}
/* settings */
.prv{display:flex;gap:12px;align-items:flex-start}
.more.icons button .ic{color:var(--pitch)}
.more button.danger .ic{color:var(--ball)}
/* what's new */
.chg2{display:flex;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.chg2:first-of-type{border-top:0}
.chg2 .cv{flex:none;width:76px}.chg2 .cv b{display:block;font-family:"Chivo Mono",monospace}.chg2 .cv small{color:var(--muted);font-size:12px}
.chg2.now .cv b{color:var(--pitch)}
.chg2 ul{margin:0;padding-left:18px;font-size:14px;line-height:1.45}
button.medal{background:none;border:0;font:inherit;color:inherit;cursor:pointer;padding:0}
.bsheet{text-align:center}
.coin.big{width:96px;height:96px;font-size:40px;margin:6px auto 10px}
.bsheet h3{margin:0 0 4px}
.bwhen{font-weight:700;margin:2px 0 10px}
.bmatch{text-align:left}
.prog.wide{height:8px;max-width:260px;margin:8px auto 0}
.hint{margin:4px 2px 0;min-height:1em}
.wherel{display:flex;align-items:center;gap:6px;background:none;border:0;padding:8px 2px 0;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;font-weight:600}
.wherel span{color:var(--pitch);font-weight:700}

/* Home v5 */
.hrev{background:var(--board);color:#fff;border-radius:20px;padding:16px;margin-top:12px}
.hrev .k{font-size:12.5px;color:#9aa59e;font-weight:700;letter-spacing:.02em}
.hrev h3{font-family:"Big Shoulders Display",system-ui,sans-serif;font-weight:900;font-size:30px;margin:4px 0 10px;line-height:1;color:#fff}
.hrgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.hrgrid div{background:#1f2629;border-radius:12px;padding:9px 10px}
.hrgrid b{display:block;font-family:"Chivo Mono",monospace;color:var(--digit);font-size:22px}
.hrgrid small{color:#9aa59e;font-size:11.5px}
.hrline{margin:10px 0 0;color:#c9d2cc;font-size:13.5px;line-height:1.45}
.hrbtn{display:flex;gap:8px;margin-top:12px}
.hrbtn button{flex:1;text-align:center;border-radius:12px;padding:10px;font:inherit;font-weight:700;font-size:14px;border:0;cursor:pointer}
.hrbtn .a1{background:var(--digit);color:var(--board)}.hrbtn .a2{background:#232a2d;color:#fff}
.hform{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.hfm{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center;font:inherit;color:inherit;cursor:pointer;min-width:0}
.hfm .res{margin:0 auto 4px}
.hfm b{display:block;font-family:"Chivo Mono",monospace;font-size:12px}
.hfm small{display:block;color:var(--muted);font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hvs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:14px}
.hvs div{padding:10px 6px;text-align:center}.hvs div+div{border-left:1px solid var(--line)}
.hvs small{display:block;font-size:11px;color:var(--muted);font-weight:700}
.hvs b{display:block;font-family:"Chivo Mono",monospace;font-size:19px;margin:2px 0}
.hvs span{font-size:11.5px;color:var(--muted)}.hvs span.up{color:var(--pitch)}.hvs span.down{color:var(--ball)}
.hnote{font-size:12px;color:var(--muted);margin:6px 2px 0}.hnote.dark{font-size:13.5px;color:var(--ink)}
.hbest{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hbst{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.hbst small{font-size:11.5px;color:var(--muted);font-weight:700;display:flex;align-items:center;gap:5px}
.hbst b{display:block;font-family:"Chivo Mono",monospace;font-size:24px;margin:4px 0 2px}
.hbst span{font-size:12.5px;color:var(--muted)}
.harch{display:flex;gap:12px;align-items:center;width:100%;background:linear-gradient(135deg,#fbf3d6,#f3e7c0);border:0;border-radius:16px;padding:14px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.harch .big{font-family:"Big Shoulders Display",system-ui,sans-serif;font-weight:900;font-size:40px;line-height:1;color:#6b4d00;flex:none}
.harch b{display:block}.harch small{color:#6b5a2a;font-size:12.5px}
.hchips{display:flex;gap:6px;flex-wrap:wrap}
.hbdg{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 5px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.hbdg i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:13px;background:linear-gradient(145deg,#f7d97a,#c9962b)}

/* maps */
.bigmap{height:62vh;min-height:360px;border-radius:16px;overflow:hidden;background:#e8ece6;position:relative;margin-top:4px}
@media (max-width:860px){.bigmap{height:420px}}
.mapwait{position:absolute;inset:0;display:grid;place-items:center;margin:0}
.journey{display:flex;align-items:center;gap:10px;margin:10px 0}
.journey input{flex:1}.journey b{white-space:nowrap;font-size:13.5px}
.journey .btn{display:flex;gap:6px;align-items:center;padding:8px 12px}
.mappick{margin-top:8px}
.mpt{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.mpt b{display:block;font-size:16px}.mpt small{color:var(--muted);font-size:12.5px}
.mpt a{font-weight:700;font-size:13px;color:var(--pitch);white-space:nowrap}
.mv-mini{display:block;width:100%;height:150px;border:0;padding:0;margin-top:10px;border-radius:16px;overflow:hidden;background:#e8ece6;cursor:pointer;position:relative}
.mv-mini .maplibregl-ctrl-attrib{font-size:9px}
.journey .btn{white-space:nowrap;flex:none}
/* desktop: highlights fit the page as a grid instead of a cut-off sideways scroller */
@media (min-width:861px){
  .hl{display:grid;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin-right:0;scroll-snap-type:none;padding:6px 0 12px}
  .hl>*{flex:none}.hl::after{display:none}
  .hl .hcard{min-height:150px;transform:none!important}
  .hl .hcard .big{font-size:44px}.hl .hcard b{font-size:21px}
}

/* story: badges line up whatever the name length; calmer spacing */
.medals{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:20px 10px;align-items:start;padding:20px 14px}
button.medal{display:grid;grid-template-rows:64px 2.6em 12px;justify-items:center;align-content:start;row-gap:8px;font-size:13px;line-height:1.3;width:100%}
.medal .coin{margin:0;width:64px;height:64px}
.mname{display:block;max-width:100%;text-align:center}
.mstate{display:block;width:72%;align-self:center}
.mstate .prog{display:block;margin:0}
.mstate small{display:block;font-size:11.5px;color:var(--muted);text-align:center;line-height:12px}
@media (max-width:520px){.medals{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 6px;padding:16px 8px}button.medal{grid-template-rows:56px 2.6em 12px;font-size:12px}.medal .coin{width:56px;height:56px;font-size:24px}}
#main > .seg{margin:8px 0 16px}
.tl2 .yr{margin:24px 0 8px;line-height:1}
.tl2 .yr:first-child{margin-top:8px}
.yr small{display:block;margin:6px 0 0;line-height:1.35}
.yr:before{top:6px}
.m2{margin:8px 0}
/* the Crickva ball (public/mark.svg, from the app icon) */
.ballic{background:url(/mark.svg) center/contain no-repeat!important;border-radius:0}
.ballic::after{display:none}