/* ============================================================
   CAMINO AL ESTRELLATO — stickers de reacción
   Lógica en stickers.js. Aquí solo posición y movimiento.
   ============================================================ */
:root{--stk:clamp(84px,15vh,132px)}

/* La tarjeta conserva un ancho legible; el sticker pasa abajo si no caben ambos.
   Se usa el espacio real de la columna, también dentro del iframe y de escenas con dos columnas. */
.react-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;min-width:0}
.react-row>.panel{flex:1 1 300px;min-width:0;max-width:100%;overflow-wrap:anywhere}
.react-row>.react-sticker{flex:0 0 var(--stk);margin-left:auto}
.mobile-reaction{display:none}
.react-sticker{position:relative;display:grid;place-items:center;width:var(--stk);height:var(--stk);margin:0;pointer-events:none;user-select:none;
  transform:rotate(var(--rot,4deg));animation:stk-in .55s var(--px-pop,cubic-bezier(.3,1.6,.5,1)) .12s backwards,stk-bob 3.2s ease-in-out .8s infinite}
.react-sticker.settled{animation:stk-bob 3.2s ease-in-out infinite}
.react-sticker img,.stk-pop img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;
  filter:drop-shadow(0 3px 0 rgba(17,16,24,.28)) drop-shadow(0 8px 14px rgba(17,16,24,.18))}
@keyframes stk-in{0%{opacity:0;transform:scale(.2) rotate(calc(var(--rot,4deg) - 28deg))}60%{opacity:1;transform:scale(1.14) rotate(calc(var(--rot,4deg) + 6deg))}100%{opacity:1;transform:scale(1) rotate(var(--rot,4deg))}}
@keyframes stk-bob{50%{transform:translateY(-5px) rotate(calc(var(--rot,4deg) + 2deg))}}

/* Pantalla final: dentro de la tarjeta de nota */
.grade-wrap .react-sticker{margin-left:auto}

/* Cierre de temporada: un detalle en el encabezado, sin estrechar el resumen. */
.season-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;min-width:0;container-type:inline-size}
.season-heading .tag{margin-bottom:0;min-width:0;flex:0 1 auto}
.season-heading .react-sticker{--stk:clamp(32px,15cqi,60px);flex:0 0 var(--stk);margin-left:auto}

/* Flotante: abajo a la izquierda, sobre la barra de pestañas, sin bloquear clics */
.stk-pop{position:fixed;left:clamp(12px,3vw,40px);bottom:clamp(84px,14vh,120px);z-index:9996;width:clamp(84px,15vh,128px);aspect-ratio:1;pointer-events:none}

@media(max-width:560px){
  :root{--stk:clamp(64px,12vh,88px)}
  .react-row{gap:10px}
  .stk-pop{bottom:84px}
}
@media(max-width:759px){
  .react-row{flex-direction:column;align-items:stretch;gap:8px}
  .react-row>.panel{flex:auto;width:100%}
  .react-row>.react-sticker{display:none}
  .mobile-reaction{display:flex;justify-content:flex-end;margin-top:8px}
  .mobile-reaction .react-sticker{--stk:40px}
  .stk-pop{width:64px;bottom:88px}
}