/* ONE LAST CLOWN — tema unico da interface (segue o logo: serifa antiga osso + gotica rachada + tinta vermelha).
   Regra do dono: SEM sangue. O vermelho aqui e TINTA/marca (filetes, bordas), nunca respingo. */
@font-face{font-family:'OLC Titulo';src:url(../fontes/cinzel.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'OLC Gotica';src:url(../fontes/unifrakturcook-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'OLC Texto';src:url(../fontes/special-elite.woff2) format('woff2');font-weight:400;font-display:swap}
/* arabe, hindi e japones: subconjunto so com os caracteres do jogo (tools/fontes-idiomas.cjs); unicode-range = so baixa no idioma que usa */
@font-face{font-family:'OLC Arabe';src:url(../fontes/noto-naskh-arabic.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'OLC Deva';src:url(../fontes/noto-serif-devanagari.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+0900-097F,U+A8E0-A8FF,U+200C-200D}
@font-face{font-family:'OLC JP';src:url(../fontes/noto-serif-jp.woff2) format('woff2');font-weight:400 900;font-display:swap;unicode-range:U+2026,U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+FF00-FFEF}

:root{
  --preto:#070605; --carvao:#14100d;
  --osso:#e8dcc4; --osso-2:#d6c8a8; --osso-3:#a99a7e; --osso-esc:#7d715d;
  --tinta:#8e1414; --tinta-viva:#b3221a; --tinta-esc:#4a0907;
  --marinho:#25304a; --verde-escola:#5f7a64;
  --f-idiomas:'OLC JP','OLC Arabe','OLC Deva';
  --f-titulo:'OLC Titulo',var(--f-idiomas),Georgia,serif; --f-gotica:'OLC Gotica','OLC Titulo',var(--f-idiomas),Georgia,serif; --f-texto:'OLC Texto',var(--f-idiomas),'Courier New',monospace;
  --papel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --rasgado:polygon(0 2%,3% 0,9% 1.5%,16% .3%,24% 1.8%,33% .2%,41% 1.4%,52% 0,60% 1.6%,71% .4%,79% 1.7%,88% .1%,95% 1.3%,100% 0,99.2% 9%,100% 21%,99% 34%,100% 47%,99.3% 60%,100% 73%,99% 86%,100% 97%,96% 100%,88% 98.6%,79% 100%,70% 98.4%,61% 99.8%,50% 98.5%,40% 100%,31% 98.7%,22% 100%,13% 98.4%,5% 99.8%,0 98%,.8% 86%,0 74%,.9% 61%,0 49%,.7% 36%,0 24%,.9% 12%);
}
html,body{margin:0;height:100%;background:var(--preto);overflow:hidden;font-family:var(--f-texto);color:var(--osso);user-select:none}
canvas#c{display:block;width:100%;height:100%}
#vig{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.72) 100%)}
#grao{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;opacity:.06;mix-blend-mode:overlay}
#flash{position:fixed;inset:0;pointer-events:none;background:#fff;opacity:0}
#corte{position:fixed;inset:0;pointer-events:none;background:#000;opacity:0;z-index:3}
#fresta{position:fixed;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse 75% 65% at 50% 50%,transparent 45%,rgba(0,0,0,.8) 100%),linear-gradient(90deg,#030303 0 10%,transparent 18% 82%,#030303 90%),repeating-linear-gradient(180deg,rgba(8,9,10,.94) 0 13px,rgba(28,30,32,.85) 13px 15px,transparent 15px 36px,rgba(0,0,0,.45) 36px 38px)}
.off{display:none!important}
#fresta.travada{background-color:rgba(0,0,0,.93)}
#diaInfo{margin:4px 0 0;min-height:1em}#btnDia{font-size:14px;padding:9px 20px 8px}

/* ---------- telas ---------- */
.tela{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 45%,rgba(6,4,3,.4) 0%,rgba(0,0,0,.8) 62%,rgba(0,0,0,.95) 100%);-webkit-backdrop-filter:blur(4px) saturate(.7);backdrop-filter:blur(4px) saturate(.7);padding:24px;z-index:6;box-sizing:border-box;overflow-y:auto}
#telaInicio{background:linear-gradient(90deg,rgba(0,0,0,.3),transparent 40% 60%,rgba(0,0,0,.3)),radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.12) 0%,rgba(0,0,0,.72) 70%,rgba(0,0,0,.94) 100%);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
#telaFim{background:radial-gradient(ellipse at 50% 50%,rgba(37,48,74,.28) 0%,rgba(0,0,0,.86) 68%,#000 100%)}
.logo{display:block;width:min(560px,78vw);height:auto;margin:0 auto 2px;filter:drop-shadow(0 6px 22px rgba(0,0,0,.9));animation:luzFalha 9s infinite}
.logo.peq{width:min(300px,52vw);animation:none;opacity:.92}
@keyframes luzFalha{0%,88%,100%{filter:drop-shadow(0 6px 22px rgba(0,0,0,.9)) brightness(1)}89%{filter:drop-shadow(0 6px 22px rgba(0,0,0,.9)) brightness(.55)}90%{filter:drop-shadow(0 6px 22px rgba(0,0,0,.9)) brightness(1.05)}92%{filter:drop-shadow(0 6px 22px rgba(0,0,0,.9)) brightness(.4)}93.5%{filter:drop-shadow(0 6px 22px rgba(0,0,0,.9)) brightness(1)}}
h1,h2{font-family:var(--f-titulo);font-weight:700;color:var(--osso);margin:0 0 10px;letter-spacing:.14em;text-shadow:0 2px 0 var(--tinta-esc),0 0 24px rgba(0,0,0,.9)}
h1{font-size:clamp(30px,5.6vw,64px)}
h2{font-size:clamp(24px,3.8vw,42px)}
h2.gotica,.gotica{font-family:var(--f-gotica);letter-spacing:.04em;font-size:clamp(34px,5.4vw,64px);text-shadow:0 3px 0 var(--tinta),0 0 30px rgba(0,0,0,.95)}
.titulo-gotico{text-transform:lowercase}.titulo-gotico::first-letter{text-transform:uppercase}
.num2{font:700 clamp(40px,6vw,68px)/.9 var(--f-titulo);letter-spacing:.18em;color:var(--osso);margin:-4px 0 6px;text-shadow:0 3px 0 var(--tinta),0 0 20px #000}
.ano{font:400 14px var(--f-titulo);letter-spacing:.42em;color:var(--osso-3);margin:2px 0 14px;text-transform:uppercase}
.fio{width:min(440px,72vw);height:7px;margin:8px auto 14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 7' preserveAspectRatio='none'%3E%3Cpath d='M0 3.5 L180 2.6 L205 .6 L220 3.4 L235 6.4 L260 4.4 L440 3.5 L260 3.2 L235 5 L220 1.8 L205 2 L180 4.2Z' fill='%238e1414'/%3E%3C/svg%3E") center/100% 100% no-repeat;opacity:.95}
.sub{color:var(--osso-2);max-width:580px;line-height:1.6;margin:6px 0;font-size:16px;text-shadow:0 1px 3px #000}
.aviso{color:#d8a77a}
.quase{font-family:var(--f-titulo);color:var(--osso);font-size:21px;margin:8px 0;letter-spacing:.04em}
.mini{font-size:14px;color:var(--osso-3)}

/* ---------- botoes: etiqueta de papel osso com borda de tinta gasta ---------- */
button{position:relative;background:var(--papel),linear-gradient(175deg,#efe4cb,#cbb994);color:#1d100c;border:2px solid var(--tinta);border-radius:2px;padding:12px 30px 11px;font:700 17px var(--f-titulo);letter-spacing:.16em;cursor:pointer;margin:16px 7px 0;box-shadow:0 0 0 1px rgba(0,0,0,.6),inset 0 0 14px rgba(90,50,20,.35),3px 4px 0 rgba(0,0,0,.55);clip-path:var(--rasgado);transition:background-color .15s,color .15s}
button:hover,button:focus-visible{color:var(--tinta);outline:none;animation:tremor .28s steps(2) infinite}
button:focus-visible{box-shadow:0 0 0 3px var(--osso),3px 4px 0 rgba(0,0,0,.55)}
button:active{transform:translate(1px,2px)}
button:disabled{opacity:.55;animation:none;cursor:wait}
button.sec{background:rgba(10,8,7,.7);color:var(--osso-2);border-color:var(--osso-esc)}
button.sec:hover{color:var(--osso);border-color:var(--tinta-viva)}
@keyframes tremor{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-.6px,.4px) rotate(-.4deg)}100%{transform:translate(.6px,-.3px) rotate(.3deg)}}

/* ---------- teclas desenhadas como etiqueta de papel ---------- */
kbd,.ctl b{display:inline-block;font:700 13px var(--f-titulo);letter-spacing:.06em;color:#1d100c;background:linear-gradient(175deg,#efe4cb,#c9b791);border:1px solid var(--tinta);border-radius:1px;padding:1px 7px 0;margin:0 2px;box-shadow:1px 2px 0 rgba(0,0,0,.6);transform:rotate(-1.5deg);text-shadow:none;line-height:1.35}
.ctl b:nth-child(even),kbd:nth-of-type(even){transform:rotate(1.2deg)}
.ctl{font:14px var(--f-texto);color:var(--osso-3);margin-top:18px;line-height:2.1;max-width:760px}

/* ---------- painel de papel manchado (pausa, leitura) ---------- */
.painel{position:relative;background:var(--papel),radial-gradient(ellipse at 30% 20%,rgba(255,250,235,.25),transparent 60%),radial-gradient(circle at 82% 78%,rgba(120,80,40,.28),transparent 30%),linear-gradient(170deg,#e6dabd,#cdbd98 70%,#b8a47c);color:#2a1f16;padding:26px 34px 24px;max-width:560px;width:calc(100% - 32px);box-sizing:border-box;clip-path:var(--rasgado);filter:drop-shadow(0 12px 40px #000);text-align:left}
.painel h2{color:#1f140e;text-shadow:none;text-align:center;font-size:clamp(24px,3.4vw,34px)}
.painel .fio{margin:4px auto 12px}

/* abas da pausa */
.abas{display:flex;justify-content:center;gap:4px;margin:0 0 12px;border-bottom:2px solid rgba(142,20,20,.55)}
.abas button{margin:0;clip-path:none;box-shadow:none;border:none;border-radius:0;background:transparent;color:#5c4a36;font-size:14px;padding:8px 14px;animation:none}
.abas button[aria-selected=true]{color:var(--tinta);border-bottom:3px solid var(--tinta);margin-bottom:-2px}
.abas button:hover{color:var(--tinta);animation:none}
.aba{min-height:150px}
.painel label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;font:15px var(--f-texto);color:#2a1f16}
.painel label.chk{justify-content:flex-start}
.painel .ctl{color:#3e3124;margin:4px 0;font-size:14px;line-height:2.2}
.painel .acoes{text-align:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:220px;height:6px;background:linear-gradient(90deg,#3a2a1e,#6d5a44);border-radius:3px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:20px;background:var(--tinta);border:2px solid #f0e6cf;border-radius:2px;cursor:pointer;transform:rotate(4deg)}
input[type=range]:focus-visible{box-shadow:0 0 0 2px var(--tinta)}
input[type=checkbox]{accent-color:var(--tinta);width:18px;height:18px}

/* leitura de pista (papel) */
#leitura .papel{transform:rotate(-.6deg);max-width:540px}
#lTit{font:700 14px var(--f-titulo);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);margin-bottom:12px}
#lTxt{font:19px/1.6 var(--f-texto);color:#21180f}
#lRod{font:14px var(--f-texto);color:#6b5a43;margin-top:16px;letter-spacing:.04em}

/* ---------- HUD ---------- */
.ico{display:inline-block;width:22px;height:22px;vertical-align:-6px;margin-right:6px;background:center/contain no-repeat;filter:drop-shadow(0 1px 2px #000)}
.i-chave{background-image:url(icones/chave.svg)}.i-pista{background-image:url(icones/pista.svg)}.i-lanterna{background-image:url(icones/lanterna.svg)}
.i-pulmao{background-image:url(icones/pulmao.svg)}.i-ar{background-image:url(icones/ar.svg)}.i-lata{background-image:url(icones/lata.svg)}
.i-caderno{background-image:url(icones/caderno.svg)}.i-engrenagem{background-image:url(icones/engrenagem.svg)}.i-altofalante{background-image:url(icones/altofalante.svg)}
.i-porta{background-image:url(icones/porta.svg)}.i-olho{background-image:url(icones/olho.svg)}.i-pilha{background-image:url(icones/pilha.svg)}
#hud{position:fixed;left:18px;top:14px;pointer-events:none;font:700 14px var(--f-titulo);letter-spacing:.12em;color:var(--osso-3);text-shadow:0 1px 3px #000,0 0 8px #000;z-index:1}
#hud>span{margin-right:20px;white-space:nowrap}#hud b{color:var(--osso);font-weight:700}
#hLatas:not(:empty)::before{content:'';display:inline-block;width:22px;height:22px;vertical-align:-6px;margin-right:6px;background:url(icones/lata.svg) center/contain no-repeat}
#bat{position:fixed;right:18px;top:14px;width:130px;pointer-events:none;z-index:1;font:700 14px var(--f-titulo);color:var(--osso-3);letter-spacing:.1em;text-align:right;text-shadow:0 1px 3px #000}
.barra{height:6px;background:rgba(10,8,6,.75);border:1px solid rgba(232,220,196,.35);border-radius:1px;margin-top:5px;overflow:hidden;box-shadow:0 1px 3px #000}
.barra i{display:block;height:100%;width:100%;background:#c9c4b4;transition:width .2s}
#folBox{position:fixed;left:50%;bottom:30px;width:190px;margin-left:-95px;pointer-events:none;transition:opacity .4s;z-index:1;display:flex;align-items:center;gap:6px}
#folBox .barra{flex:1;margin:0}
#arBox{position:fixed;left:50%;bottom:62px;width:240px;margin-left:-120px;pointer-events:none;z-index:2;font:700 14px var(--f-titulo);letter-spacing:.14em;color:#b9c4d4;text-align:center;text-shadow:0 1px 3px #000}
#leg{position:fixed;left:0;right:0;bottom:96px;text-align:center;font:20px/1.45 var(--f-texto);color:var(--osso);text-shadow:0 2px 8px #000,0 0 3px #000,0 0 1px #000;pointer-events:none;padding:0 12%;transition:opacity .4s;z-index:4}
#dica{position:fixed;left:0;right:0;bottom:140px;text-align:center;font:16px var(--f-texto);color:var(--osso-2);text-shadow:0 2px 6px #000,0 0 2px #000;pointer-events:none;opacity:0;transition:opacity .4s;z-index:4}
#prompt{position:fixed;left:50%;top:56%;transform:translateX(-50%);font:16px var(--f-texto);color:var(--osso);text-shadow:0 2px 6px #000,0 0 2px #000;pointer-events:none;z-index:1;width:max-content;max-width:calc(100vw - 32px);text-align:center}
#mira{position:fixed;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:rgba(232,220,196,.35);pointer-events:none}
#letreiro{position:fixed;left:0;right:0;top:44%;text-align:center;font:700 clamp(20px,2.8vw,30px) var(--f-titulo);color:var(--osso);letter-spacing:.12em;z-index:5;pointer-events:none;opacity:0;transition:opacity .8s;text-shadow:0 2px 0 var(--tinta-esc),0 0 18px #000}
#btnPular{position:fixed;right:20px;bottom:20px;z-index:7;margin:0;padding:8px 18px;font-size:14px}
#carregando{font:15px var(--f-texto);color:var(--osso-3);margin-top:14px;letter-spacing:.08em}
#carregando::after{content:'';display:inline-block;width:18px;height:18px;margin-left:8px;vertical-align:-4px;background:url(icones/olho.svg) center/contain no-repeat;animation:pisca 2.4s infinite}
@keyframes pisca{0%,80%,100%{transform:scaleY(1)}86%{transform:scaleY(.1)}}

/* anuncio simulado */
#anuncio{z-index:9;background:var(--preto)}
#anuncio .painel{text-align:center;max-width:420px}

/* susto: letras tremem */
.susto{animation:tremor .09s steps(2) 8}
/* reduzir tremor e flashes (opcao do jogador) e preferencia do sistema */
body.reduzido .logo,body.reduzido button:hover,body.reduzido .susto,body.reduzido #carregando::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.logo,button:hover,.susto,#carregando::after{animation:none!important}}
@media (max-width:640px){.painel{padding:20px 18px}.ctl{font-size:14px}#hud>span{margin-right:12px}}
.painel .ico{filter:brightness(.3) sepia(.5)}
.abas button[aria-selected=true] .ico{filter:none}
#telaPausa .logo.peq{margin-bottom:-8px;position:relative;z-index:1}
.painel button.sec .ico{filter:none}
@media (max-width:640px){#hud{font-size:14px;max-width:60vw}#bat{width:96px}}

/* ---------- selos: anel "SEGURE E" e caderno (TAB) ---------- */
#selo{position:fixed;left:50%;top:60%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:4;font:700 15px var(--f-titulo);letter-spacing:.16em;color:var(--osso);text-shadow:0 2px 6px #000}
#selo svg{transform:rotate(-90deg);filter:drop-shadow(0 0 8px rgba(255,170,80,.45))}
#selo .trilho{fill:none;stroke:rgba(232,220,196,.22);stroke-width:4}
#selo .arco{fill:none;stroke:#f0b060;stroke-width:5;stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176}
#selo kbd,#cadAviso kbd{font:700 13px var(--f-titulo);border:1px solid var(--osso-3);padding:0 5px;border-radius:3px}
#cadAviso{position:fixed;right:18px;top:58px;font:14px var(--f-texto);color:var(--osso-2);text-shadow:0 1px 3px #000;z-index:4;pointer-events:none}
#caderno .caderno{max-width:600px;width:min(600px,92vw);text-align:left;transform:rotate(.4deg)}
#caderno .abas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#caderno .abas button{font:700 12px var(--f-titulo);letter-spacing:.1em;padding:5px 10px;margin:0;background:transparent;color:#4a3a28;border:1px solid rgba(60,40,20,.4)}
#caderno .abas button.sel{background:rgba(142,20,20,.12);color:var(--tinta);border-color:var(--tinta)}
#caderno h3{font:700 20px var(--f-titulo);margin:4px 0 6px;color:#2a1f16;letter-spacing:.08em}
#caderno canvas{display:block;margin:0 auto 6px;max-width:100%;height:auto}
#caderno table{width:100%;border-collapse:collapse;font:15px/1.45 var(--f-texto);color:#2a1f16}
#caderno td{padding:4px 6px;border-top:1px dashed rgba(60,40,20,.3);vertical-align:top}#caderno td:first-child{width:92px;font-weight:700;color:#5a4030}
#caderno ol{font:15px/1.55 var(--f-texto);color:#2a1f16;margin:4px 0 6px;padding-left:22px}
#caderno .nota{font:italic 14px var(--f-texto);color:#5a4030}
#caderno .ok{color:#2a6a2a;font-size:18px}#caderno .falta{color:#8a7a60}
#caderno .crianca{font:16px var(--f-texto);color:#2a1f16;margin:6px 0}#caderno .crianca.falta{color:#8a7a60;letter-spacing:.3em}
.i-selo{background-image:url(icones/selo.svg)}.i-vela{background-image:url(icones/vela.svg)}
#icoItem{position:fixed;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;z-index:1;opacity:0;transition:opacity .25s;background:center/contain no-repeat;filter:drop-shadow(0 1px 3px #000)}
#prevStats{white-space:pre-line}
/* idiomas: arabe e devanagari sao escritas ligadas (espacamento entre letras quebra a ligacao); arabe = texto rtl, mas HUD e toque nao espelham */
html[lang=ar] *,html[lang=hi] *{letter-spacing:0!important}
@font-face{font-family:'OLC Arabe Pleno';src:url(../fontes/noto-naskh-arabic.woff2) format('woff2');font-weight:400 900;font-display:swap}
html[lang=ja]{--f-texto:'OLC JP','OLC Texto','Courier New',monospace}
html[lang=ar]{--f-titulo:'OLC Arabe Pleno','OLC Titulo',Georgia,serif;--f-gotica:'OLC Arabe Pleno','OLC Gotica',Georgia,serif;--f-texto:'OLC Arabe Pleno','OLC Texto','Courier New',monospace}
html[lang=ar] #hud,html[lang=ar] #toque,html[lang=ar] canvas{direction:ltr}
html[dir=rtl] .painel,html[dir=rtl] #caderno .caderno,html[dir=rtl] #credLista{text-align:right}
html[lang=ar] #leg,html[lang=ar] #dica,html[lang=ar] #prompt{unicode-bidi:plaintext}

/* guia discreto (10/11): objetivo atual no canto, some sozinho; escuridao do momento de perigo */
#objetivo{position:fixed;left:18px;top:40px;max-width:min(520px,60vw);font:14px var(--f-texto);color:var(--osso-2);text-shadow:0 1px 3px #000,0 0 6px #000;pointer-events:none;opacity:0;transition:opacity .6s;z-index:30;unicode-bidi:plaintext}
#escuro{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.55) 0%,rgba(0,0,0,.92) 55%,#000 100%);z-index:2;transition:opacity .15s}
/* dono 10/11: dentro do armário o prompt, a tecla e o AR ficam POR CIMA das frestas, com fundo próprio para ler */
#prompt,#arBox,#icoItem{z-index:3}
body:has(#fresta:not(.off)) #prompt:not(:empty),body:has(#fresta:not(.off)) #arBox{background:rgba(4,4,5,.82);padding:6px 14px 7px;border-radius:4px;box-shadow:0 0 0 1px rgba(201,196,180,.18),0 4px 18px #000}
body:has(#fresta:not(.off)) #arBox{padding-bottom:10px}
/* PULAR: acima de tudo da abertura, clicável, tecla escrita no botão e anel de "segure" */
#btnPular{z-index:8;pointer-events:auto;display:flex;align-items:center;gap:9px;touch-action:none;-webkit-user-select:none;user-select:none}
#btnPular kbd{font:700 12px var(--f-titulo);border:1px solid var(--osso-3);padding:1px 6px;border-radius:3px}
#btnPular .anel{width:18px;height:18px;border-radius:50%;flex:none;background:conic-gradient(var(--osso) calc(var(--p,0)*360deg),rgba(201,196,180,.22) 0);-webkit-mask:radial-gradient(circle,transparent 5px,#000 6px);mask:radial-gradient(circle,transparent 5px,#000 6px)}