/* Baclover web: mobile primeiro, base clara estilo Apple, verde musgo so como destaque. */
:root{
  color-scheme:light dark;
  --bg:#F2F2F7; --paper:#FFFFFF; --ink:#1C1C1E; --muted:#6B6B70; --line:rgba(60,60,67,.14); --soft:#F2F2F7;
  --accent:#4E6A2C; --sun:#B0893A;
  --q0:#8C918A; --q1:#A27E2C; --q2:#6E8A45; --q3:#4E6A2C; --q4:#2E4914;
  --w-glassy:#6E8A45; --w-terral:#4E6A2C; --w-cross-terral:#94812C; --w-lateral:#AE6E28; --w-maral:#AE4930;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 24px rgba(0,0,0,.06);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000; --paper:#1C1C1E; --ink:#F5F5F7; --muted:#9A9AA0; --line:rgba(84,84,88,.5); --soft:#2C2C2E;
  --accent:#A3C46E; --sun:#D7B060;
  --q0:#80867D; --q1:#CFA75A; --q2:#8FAE63; --q3:#A9C977; --q4:#CDE6A2;
  --w-glassy:#8FAE63; --w-terral:#A9C977; --w-cross-terral:#CDB65A; --w-lateral:#D99A55; --w-maral:#E07A5E;
  --shadow:none;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--f);letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
.wrap{max-width:720px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 56px max(16px,env(safe-area-inset-left))}
.num{font-variant-numeric:tabular-nums}

/* topo */
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 calc(-1*max(16px,env(safe-area-inset-left)));padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-left)) 10px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none}
.brand svg{width:32px;height:32px}
.wordmark{font-family:"Bricolage Grotesque",var(--f);font-weight:800;letter-spacing:-.04em;font-size:24px;text-transform:lowercase}
.pill{font-size:12.5px;background:var(--soft);padding:4px 10px;border-radius:99px;color:var(--ink);white-space:nowrap}
.topbar .pill{background:var(--paper)}

/* nivel */
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:16px 0 4px;background:color-mix(in srgb,var(--ink) 8%,var(--bg));border-radius:12px;padding:2px}
.levels button{border:0;background:transparent;border-radius:10px;padding:9px 6px;font-size:14px;font-weight:500;color:var(--muted)}
.levels button[aria-checked="true"]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}

/* aviso */
.banner{margin:12px 0 0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--sun) 16%,var(--paper));font-size:14px}

/* dias */
.days{display:flex;gap:8px;overflow-x:auto;padding:16px 2px 6px;scroll-snap-type:x proximity;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:1 0 84px;scroll-snap-align:start;border:0;background:var(--paper);border-radius:18px;padding:12px 10px;text-align:left;box-shadow:var(--shadow);display:grid;gap:2px}
.day .dn{font-size:13px;font-weight:600;color:var(--muted)}
.day .ds{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.day .dv{font-size:13px;color:var(--muted)}
.day .dq{height:4px;border-radius:2px;margin-top:6px;background:var(--line)}
.day[aria-pressed="true"]{box-shadow:var(--shadow),inset 0 0 0 2px var(--accent)}
.day[aria-pressed="true"] .dn{color:var(--ink)}

/* resposta direta */
.hero{background:var(--paper);border-radius:22px;box-shadow:var(--shadow);padding:22px;display:grid;grid-template-columns:auto 1fr;gap:16px 20px;align-items:center;margin-top:12px}
.hero.solo{grid-template-columns:1fr}
.hero .q{font-size:14px;color:var(--muted);font-weight:500}
.hero .w{font-size:clamp(34px,9vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:2px 0 6px}
.hero .why{font-size:15px;color:var(--muted)}
.ring{position:relative;width:96px;height:96px}
.ring svg{width:96px;height:96px;display:block}
.ring .rb{stroke:var(--line)}
.ring .rg{stroke:var(--qc)}
.brand .bw{stroke:var(--accent)}
.brand .bs{stroke:var(--sun)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:28px;font-weight:800;letter-spacing:-.03em}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--soft);border-radius:10px;padding:7px 11px;font-size:13px}
.chip b{font-weight:600}
.tip{grid-column:1/-1;background:var(--soft);border-radius:14px;padding:11px 14px;font-size:14.5px}

h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:32px 2px 10px}
.sub{font-size:13px;color:var(--muted);margin:-6px 2px 10px}

/* ranking */
.rank{background:var(--paper);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.rk{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;border:0;background:none;text-align:left;padding:13px 16px;border-bottom:.5px solid var(--line)}
.rk:last-child{border-bottom:0}
.rk:active{background:var(--soft)}
.rk[aria-current="true"]{background:color-mix(in srgb,var(--accent) 9%,var(--paper))}
.rk .n{font-size:13px;color:var(--muted);font-weight:600}
.rk .nm{font-weight:600;font-size:16px;line-height:1.25}
.rk .mt{font-size:13px;color:var(--muted)}
.empty{padding:18px 16px;color:var(--muted)}

/* nota */
.score{display:inline-grid;place-items:center;min-width:46px;height:34px;padding:0 8px;border-radius:10px;font-weight:700;font-size:17px;letter-spacing:-.02em;
  background:color-mix(in srgb,var(--qc) 22%,var(--paper));box-shadow:inset 0 0 0 1.5px var(--qc)}
.q0{--qc:var(--q0)}.q1{--qc:var(--q1)}.q2{--qc:var(--q2)}.q3{--qc:var(--q3)}.q4{--qc:var(--q4)}

/* detalhe do pico */
.spothead{margin:32px 2px 6px}
.spothead h2{margin:0 0 2px}
.spothead .ty{color:var(--muted);font-size:14px}
.seal{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;padding:6px 12px;border-radius:99px;background:var(--soft);background:var(--paper);box-shadow:var(--shadow)}
.seal i{width:9px;height:9px;border-radius:50%;border:2px solid var(--muted);display:inline-block}
.seal.calibrado i{background:var(--accent);border-color:var(--accent)}
.seal.parcial i{background:linear-gradient(90deg,var(--sun) 50%,transparent 50%);border-color:var(--sun)}
.hours{background:var(--paper);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.hr{display:grid;grid-template-columns:44px 48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border:0;border-bottom:.5px solid var(--line);background:none;width:100%;text-align:left}
.hr .hx span{display:block}
.hr[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--paper))}
.hr:last-child{border-bottom:0}
.hr.night{opacity:.5}
.hr.best{background:color-mix(in srgb,var(--accent) 9%,var(--paper))}
.hr .h{font-weight:600;font-size:15px}
.hr .face{font-weight:600;font-size:15px;line-height:1.25}
.hr .meta{font-size:12.5px;color:var(--muted)}
.hr .conf{height:3px;border-radius:2px;background:var(--line);margin-top:6px;overflow:hidden;max-width:96px}
.hr .conf i{display:block;height:100%;background:var(--muted)}
.wind{font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;white-space:nowrap;
  background:color-mix(in srgb,var(--wc) 18%,var(--paper));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--wc) 55%,transparent)}
.w-glassy{--wc:var(--w-glassy)}.w-terral{--wc:var(--w-terral)}.w-cross-terral{--wc:var(--w-cross-terral)}.w-lateral{--wc:var(--w-lateral)}.w-maral{--wc:var(--w-maral)}
.mods{font-size:12px;color:var(--muted);margin-top:4px}

/* sobre o pico */
.facts{margin:0;background:var(--paper);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:11px 16px;border-bottom:.5px solid var(--line)}
.facts div:last-child{border-bottom:0}
.facts dt{font-weight:600;font-size:14px}
.facts dd{margin:0;font-size:14.5px;color:var(--muted)}
.facts .hl{background:color-mix(in srgb,var(--sun) 12%,var(--paper))}
.facts .hl dd{color:var(--ink)}

.foot{margin-top:36px;font-size:12.5px;color:var(--muted);display:grid;gap:6px}
.loading,.err{color:var(--muted);padding:32px 4px}
.err button{margin-top:12px;border:0;background:var(--paper);border-radius:12px;padding:10px 16px;box-shadow:var(--shadow);font-weight:600}


/* pagina do pico */
.back{font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;padding:6px 4px;white-space:nowrap}
.spotsel select{font:inherit;font-size:14px;max-width:150px;border:0;border-radius:99px;padding:6px 12px;background:var(--paper);color:var(--ink);box-shadow:var(--shadow);appearance:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spothead h1{font-size:clamp(30px,8vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0 0 2px}
.jump{grid-column:1/-1;justify-self:start;border:0;background:var(--soft);border-radius:10px;padding:8px 14px;font-weight:600;font-size:14px}
.xr{margin-top:12px;background:var(--paper);border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.xr-top{display:flex;gap:14px;align-items:center;padding:16px 16px 12px}
.xr-top .score{min-width:56px;height:44px;font-size:22px}
.xr-k{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.xr-when{font-weight:700;font-size:17px;line-height:1.2}
.xr-sub{font-size:14px;color:var(--muted)}
.xr .facts{box-shadow:none;border-radius:0;border-top:.5px solid var(--line)}
.chart{margin-top:14px}
.ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 6px}
.ch-head h3{margin:0;font-size:16px;font-weight:700}
.cap{font-size:12px;color:var(--muted)}
.chartbox{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);overflow-x:auto;-webkit-overflow-scrolling:touch}
.chsvg{display:block;min-width:760px}
.ch-night{fill:var(--ink);opacity:.06}
.ch-day{fill:var(--accent);opacity:.09}
.ch-sel{fill:var(--accent);opacity:.22}
.ch-hit{fill:transparent;cursor:pointer}
.ch-grid{stroke:var(--line);stroke-width:1}
.ch-sep{stroke:var(--muted);stroke-width:1;opacity:.5}
.ch-lbl,.ch-ax,.ch-ax2{fill:var(--muted);font:11px var(--f)}
.ch-lbl{font-weight:600}
.ch-bar{fill:var(--qc)}
.ch-bar.w-glassy{fill:var(--w-glassy)}.ch-bar.w-terral{fill:var(--w-terral)}.ch-bar.w-cross-terral{fill:var(--w-cross-terral)}.ch-bar.w-lateral{fill:var(--w-lateral)}.ch-bar.w-maral{fill:var(--w-maral)}
.ch-gust{stroke:var(--ink);stroke-width:1.5;opacity:.55}
.ch-band{fill:var(--accent);opacity:.25}
.ch-line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.ch-line2{fill:none;stroke:var(--sun);stroke-width:1.8;stroke-dasharray:4 4}
.ch-ax2{fill:var(--sun)}
.acc{margin-top:24px}
.acc>summary{cursor:pointer;font-size:17px;font-weight:700;padding:8px 2px}
.acc .facts{margin-top:8px}

@media (max-width:420px){
  .hero{padding:18px;grid-template-columns:78px 1fr;gap:14px}
  .ring,.ring svg{width:78px;height:78px}.ring b{font-size:24px}
  .hr{grid-template-columns:38px 46px minmax(0,1fr);}
  .hr .wind{grid-column:3;justify-self:start}
  .spotsel select{max-width:118px}
  .facts div{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}