/* Scoped to the Frankie chat module; this never styles the page shell. */
.star-toy{
    --star-gold:#f4df58;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin:0;padding:.68rem 1rem;
    border-top:1px solid var(--ff-line,rgba(254,126,1,.28));
    border-bottom:1px solid var(--ff-line, rgba(254,126,1,.28));
    background:linear-gradient(90deg,rgba(5,5,5,.95),rgba(25,18,10,.76),rgba(5,5,5,.95));
    color:var(--ff-ivory,#fff9f2)}

    .star-toy__copy{
        min-width:0}
        
    .star-toy__eyebrow{
        display:block;color:var(--star-gold);
        font:700 .52rem/1.2 var(--mono,"Courier New",monospace);
        letter-spacing:.13em;text-transform:uppercase}
        
    .star-toy__copy strong{
        display:block;margin-top:.18rem;
        font-size:.78rem;
        line-height:1.2}
    
    .star-toy__copy p{
        margin:.2rem 0 0;
        color:var(--ff-muted,#c8b9aa);
        font-size:.62rem;
        line-height:1.25}
        
    .star-toy__field{
        display:flex;
        align-items:center;
        gap:.55rem;
        margin:0;
        border:0;
        padding:0}
    
    .star-toy__sr{
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip:rect(0,0,0,0);
        white-space:nowrap;
        border:0}
        
    .star-toy__stars{
        display:flex;
        align-items:center;
        gap:.08rem}
        
    .star-toy__input{
        position:absolute;
        width:1px;
        height:1px;
        opacity:0}
    
    .star-toy__label{
        position:relative;
        display:block;
        width:34px;
        height:34px;
        color:rgba(244,223,88,.28);
        cursor:pointer;
        transition:color .15s ease,transform .15s ease,filter .15s ease}
        
    .star-toy__label:hover{
        color:var(--star-gold);
        transform:translateY(-2px)}
        
    .star-toy__label:focus-within,.star-toy__input:focus-visible + .star-toy__label{
        outline:2px solid var(--star-gold);
        outline-offset:2px;
        border-radius:5px}
        
    .star-toy__label--selected{
        color:var(--star-gold);
        filter:drop-shadow(0 0 6px rgba(244,223,88,.35))}
        
    .star-toy__star{
        display:block;
        width:100%;
        height:100%;
        overflow:visible}
        
    .star-toy__stroke{
        fill:transparent;
        stroke:currentColor}
        
    .star-toy__fill{
        fill:currentColor;
        stroke:currentColor;
        transform:scale(0);
        transform-origin:16px 16px}
        
    .star-toy__ring{
        stroke:currentColor;
        opacity:0}
        
    .star-toy__line{
        fill:none;
        stroke:currentColor;
        opacity:0}
        
    .star-toy__label--selected .star-toy__fill{
        transform:scale(1);
        transition:transform .18s ease}
        
    .star-toy__label--burst .star-toy__ring{
        animation:starToyRing .55s ease-out both}
        
    .star-toy__label--burst .star-toy__fill{
        animation:starToyFill .55s ease-out both}
        
    .star-toy__label--burst .star-toy__stroke{
        animation:starToyStroke .55s ease-out both}
        
    .star-toy__label--burst .star-toy__line{
        animation:starToyLine .55s ease-out both}
        
    .star-toy__display{
        min-width:7.5rem;
        color:var(--star-gold);
        font:700 .54rem/1.2 var(--mono,"Courier New",monospace);
        letter-spacing:.05em;text-align:right;text-transform:uppercase}
        
    @keyframes starToyRing{0%{opacity:1;transform:scale(0)}70%,100%{opacity:0;transform:scale(1)}}
    @keyframes starToyFill{0%{transform:scale(0)}35%{transform:scale(1.12)}100%{transform:scale(1)}}
    @keyframes starToyStroke{0%,35%{opacity:1}100%{opacity:0}}
    @keyframes starToyLine{0%{opacity:1;stroke-dashoffset:12}100%{opacity:0;stroke-dashoffset:0}}


    @media(max-width:620px){
        .star-toy{align-items:flex-start;flex-direction:column;gap:.5rem;padding:.65rem .8rem}
        .star-toy__field{width:100%;justify-content:space-between}
        .star-toy__display{min-width:0}
        .star-toy__label{width:35px;height:35px}}
    @media(prefers-reduced-motion:reduce){
        .star-toy__label,.star-toy__fill{transition:none}
        .star-toy__label--burst .star-toy__ring,
        .star-toy__label--burst .star-toy__fill,
        .star-toy__label--burst .star-toy__stroke,
        .star-toy__label--burst .star-toy__line{animation:none}}