/* BÔNUS DE RECOMEÇO (1230): o selo dourado com seta para cima ao lado do rótulo EXP e o painel
   flutuante que ele abre (src/online/recomeco.js). Pedido do autor (10/10): "uma bolinha com uma
   seta pra cima dourada, esse círculo tem um efeito girando ... nada exagerado, minimalista".
   O giro é só um transform num anel (sem repintar a faixa); parado com movimento reduzido. */
.recomeco-selo{position:relative;display:inline-grid;place-items:center;vertical-align:middle;margin:-3px 0 -3px 6px;padding:0;
  width:calc(15px * var(--text-scale,1));height:calc(15px * var(--text-scale,1));border-radius:50%;cursor:var(--cur-mao,pointer);
  border:1px solid rgba(255,215,122,.75);background:radial-gradient(circle at 35% 30%,#4a3510,#1c1406 70%);
  box-shadow:0 0 6px rgba(255,196,80,.45);color:#ffd77a;font:inherit;line-height:0}
.recomeco-selo[hidden]{display:none}
.recomeco-selo::after{content:"";position:absolute;inset:-9px}
.recomeco-selo svg{position:relative;width:68%;height:68%;fill:currentColor;filter:drop-shadow(0 0 2px rgba(255,200,90,.7))}
.recomeco-selo-anel{position:absolute;inset:-3px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,215,122,0) 0 62%,rgba(255,226,150,.95) 82%,rgba(255,215,122,0) 100%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);
  animation:recomeco-gira 2.6s linear infinite;will-change:transform}
.recomeco-selo:hover,.recomeco-selo:focus-visible,.recomeco-selo.aberto{outline:none;border-color:#ffe39a;box-shadow:0 0 9px rgba(255,205,95,.7)}
@keyframes recomeco-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.recomeco-selo-anel{animation:none}}

.recomeco-painel{position:fixed;left:0;top:0;z-index:470;width:min(272px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;box-sizing:border-box;padding:12px 14px 11px;
  border:1px solid rgba(215,169,68,.6);border-radius:12px;color:#e8e1d0;font-size:calc(12px * var(--text-scale,1));line-height:1.35;
  background:linear-gradient(145deg,rgba(30,23,13,.98),rgba(14,11,7,.98));box-shadow:0 14px 34px rgba(0,0,0,.6),inset 3px 0 0 #d7a944}
.recomeco-painel[hidden]{display:none}
.recomeco-fechar{position:absolute;top:4px;right:6px;width:26px;height:26px;padding:0;border:0;background:none;color:#a99f88;font-size:18px;line-height:1;cursor:var(--cur-mao,pointer)}
.recomeco-fechar:hover{color:#ffd77a}
.recomeco-topo{display:flex;align-items:center;gap:10px;padding-right:22px;margin-bottom:6px}
.recomeco-mini{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#ffd77a;
  border:1px solid rgba(255,215,122,.7);background:radial-gradient(circle at 35% 30%,#4a3510,#1c1406 70%);box-shadow:0 0 8px rgba(255,196,80,.4)}
.recomeco-mini svg{width:62%;height:62%;fill:currentColor}
.recomeco-topo small{display:block;color:#d7a944;font-size:calc(10px * var(--text-scale,1));font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.recomeco-topo strong{display:block;color:#ffe2a0;font-size:calc(16px * var(--text-scale,1))}
.recomeco-painel p{margin:0 0 7px;color:#cfc6b2;overflow-wrap:anywhere}
.recomeco-painel ul{list-style:none;margin:0 0 7px;padding:0;border-top:1px solid rgba(215,169,68,.2)}
.recomeco-painel li{display:flex;justify-content:space-between;gap:8px;padding:4px 6px;border-bottom:1px solid rgba(215,169,68,.12);color:#a99f88}
.recomeco-painel li b{color:#e8e1d0;white-space:nowrap}
.recomeco-painel li.aqui{color:#ffe2a0;background:rgba(215,169,68,.12);border-radius:6px}
.recomeco-painel li.aqui b{color:#ffd77a}
.recomeco-painel .recomeco-pe{margin:0;color:#8f8674;font-size:calc(10.5px * var(--text-scale,1))}