.rn-barra {
  flex: none;
  display: flex; align-items: center; gap: 12px;
}


.rn-barra[hidden] { display: none; }
.rn-barra.rn-curta { gap: 8px; }






.rn {
  --d: 32px;
  --luz: var(--info);

  











  --escuro: .80;
  --pedra:   color-mix(in srgb, var(--luz) calc(var(--escuro) * 100%), #000);
  --pd-alto: color-mix(in srgb, var(--pedra) 100%, #201b18);
  --pd-meio: color-mix(in srgb, var(--pedra) 72%,  #140f0d);
  --pd-lado: color-mix(in srgb, var(--pedra) 55%,  #100c0a);
  --pd-baixo:color-mix(in srgb, var(--pedra) 28%,  #0a0706);
  --pd-quina:color-mix(in srgb, var(--luz) 62%, #ffffff);

  












  position: relative;
  display: block;
  width: var(--d); height: calc(var(--d) * 1.12 + 14px);
  flex: none;
  margin: 0; padding: 0; border: 0; background: none; font: inherit;
  color: var(--txt-3); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}






.rn[hidden] { display: none; }
.rn:focus-visible { outline: 2px solid var(--luz); outline-offset: 3px; border-radius: 6px; }
.rn[data-runa="chave"]    { --luz: var(--accent); }
.rn[data-runa="extensao"] { --escuro: .45; }

.rn-hex { display: block; width: var(--d); height: calc(var(--d) * 1.12);
          overflow: visible; }
.rn-corpo { transition: transform .18s ease; }






.rn-placa { fill: url(#rn-metal); stroke: #000; stroke-width: 1.2; stroke-linejoin: round; }
.rn-poco  { fill: url(#rn-fundo); stroke-linejoin: round; }




.rn-assento { fill: none; stroke: #fff; stroke-opacity: .09; stroke-width: 1.4;
              stroke-linejoin: round; transition: stroke-opacity .2s ease; }

.rn-fac { stroke: #fff; stroke-opacity: .10; stroke-width: 1.2; fill: none;
          transition: stroke-opacity .2s ease; }


.rn-contato { fill: none; stroke: #000; stroke-width: 6; stroke-linejoin: round; opacity: 0; }
.rn-junta { fill: none; stroke: var(--luz); stroke-width: 3.5; stroke-linejoin: round;
            opacity: 0; transition: opacity .2s ease; }






.rn-brilho { fill: none; stroke: var(--luz); stroke-width: 4.2; stroke-linejoin: round;
             filter: url(#rn-halo-f); opacity: 0; transition: opacity .25s ease; }
.rn-aresta { fill: none; stroke: #46423f; stroke-width: 4.2; stroke-linejoin: round;
             transition: stroke .25s ease; }






.rn-pedra { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%;
            transform: translateY(-26px) scale(1.5);
            transition: opacity .14s ease, transform .14s ease; }
.rn-pd-corpo { fill: var(--pd-meio); stroke: #000; stroke-opacity: .6;
               stroke-width: 1; stroke-linejoin: round; }
.rn-pd-f1 { fill: var(--pd-alto); }   
.rn-pd-f2 { fill: var(--pd-baixo); }  
.rn-pd-f3 { fill: var(--pd-lado); }   
.rn-pd-ar { fill: none; stroke: var(--pd-quina); stroke-opacity: .55;
            stroke-width: 1; stroke-linecap: round; }
.rn-pd-grao { fill: #fff; opacity: .065; filter: url(#rn-grao); pointer-events: none; }





.rn-gl { fill: none; stroke: #8d8886; stroke-width: 4;
         stroke-linecap: round; stroke-linejoin: round; opacity: .42;
         transform-box: fill-box; transform-origin: 50% 50%;
         transition: stroke .25s ease, opacity .25s ease, filter .25s ease; }































.rn[data-st="ok"] .rn-rot { display: none; }




.rn-rot { position: absolute; left: 50%; bottom: 0;
          transform: translateX(-50%);
          font-size: 11px; line-height: 12px; letter-spacing: .01em;
          white-space: nowrap; color: var(--txt-3);
          pointer-events: none; transition: color .18s ease; }





.rn[data-st="vazio"] .rn-aresta { animation: rn-convite 3.6s ease-in-out infinite; }
@keyframes rn-convite {
  0%, 74%, 100% { stroke: #46423f; }
  86%           { stroke: #6a635e; }
}


.rn[data-st="ok"] .rn-pedra   { opacity: 1; transform: translateY(0) scale(1); }
.rn[data-st="ok"] .rn-junta   { opacity: 1; }
.rn[data-st="ok"] .rn-fac     { stroke-opacity: 0; }
.rn[data-st="ok"] .rn-assento { stroke-opacity: 0; }   
.rn[data-st="ok"] .rn-aresta  { stroke: var(--luz); animation: none; }
.rn[data-st="ok"] .rn-brilho  { opacity: .85; }
.rn[data-st="ok"] .rn-gl      { stroke: #f4f8ff; opacity: 1;
                                filter: drop-shadow(0 0 2px var(--luz)); }
.rn[data-st="ok"] .rn-rot     { color: var(--txt-2); }






.rn[data-st="?"] { cursor: default; opacity: .42; }
.rn[data-st="?"] .rn-aresta  { stroke: var(--line); animation: none; }
.rn[data-st="?"] .rn-poco    { fill: var(--bg-2); }
.rn[data-st="?"] .rn-placa   { fill: var(--bg-3); }
.rn[data-st="?"] .rn-fac,
.rn[data-st="?"] .rn-assento { stroke-opacity: 0; }
.rn[data-st="?"] .rn-gl      { opacity: .14; filter: none; }
.rn[data-st="?"] .rn-rot     { color: transparent; }  


.rn[data-st="vazio"]:hover .rn-corpo,
.rn[data-st="ok"]:hover    .rn-corpo { transform: translateY(-1.5px); }



.rn[data-st="vazio"]:hover .rn-aresta  { animation: none; stroke: #8d8886; }
.rn[data-st="vazio"]:hover .rn-assento { stroke-opacity: .2; }
.rn[data-st="vazio"]:hover .rn-gl      { opacity: .6; stroke: #a8a19c; }
.rn[data-st="ok"]:hover    .rn-brilho  { opacity: 1; }
.rn:hover  .rn-rot   { color: var(--txt); }
.rn:active .rn-corpo { transform: translateY(1px); }


.rn-curta .rn { --d: 26px; height: calc(var(--d) * 1.12 + 14px); }


































.rn.rn-encaixando .rn-pedra   { animation: rn-descer .36s cubic-bezier(.45,.02,.5,1) both; }
.rn.rn-encaixando .rn-contato { animation: rn-contato .22s ease-out .18s both; }
.rn.rn-encaixando .rn-junta   { animation: rn-junta-nasce .36s ease-out .37s both; }
.rn.rn-encaixando .rn-aresta  { animation: rn-aro-nasce .40s ease-out .40s both; }
.rn.rn-encaixando .rn-brilho  { animation: rn-brilho-nasce .44s ease-out .40s both; }
.rn.rn-encaixando .rn-gl      { animation: rn-glifo .38s ease-out .39s both; }
.rn.rn-encaixando .rn-rot     { animation: rn-troca .38s ease-out .38s both; }

@keyframes rn-descer {
  0%   { opacity: 0; transform: translateY(-26px) scale(1.5); }
  22%  { opacity: 1; transform: translateY(-14px) scale(1.26); }
  58%  { opacity: 1; transform: translateY(0)     scale(.94); }  
  80%  { opacity: 1; transform: translateY(0)     scale(1.03); } 
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes rn-contato { 0% { opacity: 0; } 40% { opacity: .95; } 100% { opacity: 0; } }
@keyframes rn-junta-nasce {
  0%   { opacity: 0; stroke-width: 1; }
  34%  { opacity: 1; stroke-width: 5; }
  100% { opacity: 1; stroke-width: 3.5; }
}
@keyframes rn-aro-nasce {
  0% { stroke: #46423f; } 40% { stroke: var(--luz); } 100% { stroke: var(--luz); }
}
@keyframes rn-brilho-nasce { 0% { opacity: 0; } 42% { opacity: 1; } 100% { opacity: .85; } }
@keyframes rn-glifo {
  0%   { opacity: .42; transform: scale(1); }
  45%  { opacity: 1;   transform: scale(1.12); }
  100% { opacity: 1;   transform: scale(1); }
}
@keyframes rn-troca {
  0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .rn[data-st="vazio"] .rn-aresta { animation: none; }
  .rn.rn-encaixando .rn-pedra, .rn.rn-encaixando .rn-contato,
  .rn.rn-encaixando .rn-junta, .rn.rn-encaixando .rn-aresta,
  .rn.rn-encaixando .rn-brilho, .rn.rn-encaixando .rn-gl,
  .rn.rn-encaixando .rn-rot { animation: none; }
  .rn-pedra, .rn-corpo, .rn-junta, .rn-aresta, .rn-brilho, .rn-assento,
  .rn-gl, .rn-rot { transition-duration: .01ms; }
}