/* Iconos planos, código de sala, avisos (toast) */
/* --- iconos planos, código, toast --- */
:root{--starimg:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202l3%206.5%207%20.9-5.2%204.8%201.4%207L12%2017.8%205.8%2021.2l1.4-7L2%209.4l7-.9z%22%20fill%3D%22%23ffc800%22%2F%3E%3C%2Fsvg%3E")}
.ic{display:inline-block;vertical-align:-.28em;flex:none}
/* Fuego de racha (iconos.js, fuegoHTML): mismo dibujo y animación que en Expedición. Tamaño = 1.25 veces la letra de donde esté */
.fuego{display:inline-flex;align-items:center;gap:.25em;--vel:.9s}
.fuego svg{width:1.25em;height:1.25em;overflow:visible;flex:none}
.fuego .f1,.fuego .f2,.fuego .f3{transform-box:fill-box;transform-origin:50% 100%;animation:fuego-llama var(--vel) ease-in-out infinite}
.fuego .f2{animation-delay:-.15s}.fuego .f3{animation-delay:-.3s}
.fuego .ch{animation:fuego-chispa 1.1s ease-out infinite}
.fuego.f2{--vel:.6s}
.fuego.f3{--vel:.4s}.fuego.f3 svg{width:1.4em;height:1.4em;filter:drop-shadow(0 0 4px rgba(255,90,0,.65))}
.fuego.f4{--vel:.28s}.fuego.f4 svg{width:1.5em;height:1.5em;filter:drop-shadow(0 0 6px rgba(40,160,255,.85))}
.fuego.f0 svg{filter:grayscale(1);opacity:.45}.fuego.f0 .f1{animation:none}
@keyframes fuego-llama{33%{transform:scale(.95,1.08) skewX(-3deg)}66%{transform:scale(1.04,.96) skewX(3deg)}}
@keyframes fuego-chispa{0%{transform:translateY(4px);opacity:0}25%{opacity:1}100%{transform:translateY(-14px);opacity:0}}
.sec .ic{margin-right:8px;vertical-align:-.4em}
.emo .ic,#rsemo .ic{display:block;margin:0 auto;width:1em;height:1em}
.rr>span .ic{margin-right:0}
.codebox{display:flex;align-items:stretch;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#58cc02,#1cb0f6);box-shadow:0 4px 0 #1899d6,0 8px 18px -6px rgba(28,176,246,.6)}
.codebox button{background:none;border:0;border-radius:0;color:#fff;padding:7px 14px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1;text-transform:none;letter-spacing:0;box-shadow:none;width:auto;filter:none}
.codebox button:active{transform:none;background:rgba(255,255,255,.15)}
.codebox small{font-size:.58rem;letter-spacing:1.5px;text-transform:uppercase;opacity:.9;font-weight:800;display:block}
.codebox b{font-size:1.45rem;letter-spacing:3px;font-weight:900;display:block;line-height:1.05;min-width:5ch}
.codebox .eye{justify-content:center;border-left:2px solid rgba(255,255,255,.3);padding:0 12px}
#ftoast{position:fixed;left:50%;top:18px;transform:translate(-50%,-90px);z-index:90;background:var(--card);color:var(--ink);border:2px solid var(--green);border-radius:16px;padding:10px 16px;font-weight:800;font-size:.9rem;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);transition:transform .3s cubic-bezier(.2,1.4,.4,1);pointer-events:none;max-width:92vw}
#ftoast.show{transform:translate(-50%,0)}
.seg button{background:var(--card);color:var(--ink)}
.seg button.sel{background:var(--green);color:#fff}
#rmcodepill.codebox{flex-direction:row;align-items:stretch;padding:0;gap:0}
#rmcodepill.codebox button{padding:8px 14px}
#rend .emo{font-size:4rem;line-height:1;animation:drop .8s cubic-bezier(.3,1.6,.5,1)}
#end .emo .ic,#dend .emo .ic{width:1em;height:1em}
/* Feedback (js/interfaz/feedback.js) */
.mcard:has(.fb){width:min(420px,100%)}
.fbcats{display:flex;gap:8px;margin:0 0 6px}
.fbcats button{font-size:.85rem;padding:9px 6px;border-radius:12px;border-bottom-width:4px;color:var(--mute)}
.fbcats button.sel{background:var(--yel);border-color:var(--yel) var(--yel) #e5a800;color:#3c3c3c}
.fb .frin{text-align:left;font-size:.95rem}
.fb textarea.frin{resize:vertical;min-height:110px;line-height:1.4}