/* ToFlintzani — sample reading player styles */
.sr-host{ display:flex; flex-direction:column; align-items:center; gap:12px; }
/* framed keepsake look: gold border + inner mat + warm glow, so the raw photo feels intentional */
.sr-frame{ position:relative; width:100%; max-width:344px; border-radius:18px;
  padding:10px;                                   /* the "mat" around the photo */
  background:
    linear-gradient(160deg, rgba(226,189,122,.16), rgba(200,146,63,.05) 40%, rgba(20,13,18,.2)),
    radial-gradient(120% 120% at 50% 0%, #2b1d27 0%, #201118 70%);
  border:1px solid rgba(226,189,122,.45);
  box-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 30px rgba(200,146,63,.14),
    inset 0 0 0 1px rgba(255,244,224,.06);
}
.sr-frame::after{               /* thin inner gold keyline hugging the photo */
  content:""; position:absolute; inset:10px; border-radius:11px; pointer-events:none; z-index:4;
  box-shadow:inset 0 0 0 1px rgba(226,189,122,.5), inset 0 0 26px rgba(0,0,0,.5);
}
.sr-imgwrap{ position:relative; border-radius:11px; overflow:hidden; }
.sr-imgwrap::after{            /* soft vignette so the photo edges melt into the mat */
  content:""; position:absolute; inset:0; border-radius:11px; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 40px 6px rgba(20,12,16,.55);
}
.sr-img{ width:100%; height:auto; display:block; }
.sr-play[hidden]{ display:none; }
.sr-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:5;
  width:74px; height:74px; border-radius:50%; cursor:pointer;
  background:rgba(200,146,63,.92); color:#211505; border:2px solid rgba(255,244,224,.85);
  box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 0 0 rgba(200,146,63,.5);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .2s ease;
  animation:srPulse 2.6s ease-in-out infinite; }
.sr-play:hover{ background:rgba(226,189,122,1); transform:translate(-50%,-50%) scale(1.05); }
.sr-play:active{ transform:translate(-50%,-50%) scale(.96); }
.sr-icon{ font-size:26px; line-height:1; margin-left:3px; }

/* control bar (appears underneath during playback so it never covers the cup) */
.sr-bar[hidden]{ display:none; }
.sr-bar{ display:flex; align-items:center; gap:12px; width:100%; max-width:340px; margin-top:14px; }
.sr-toggle{ flex:0 0 auto; width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:rgba(200,146,63,.92); color:#211505; border:1.5px solid rgba(255,244,224,.7);
  display:flex; align-items:center; justify-content:center; transition:background .2s, transform .12s; }
.sr-toggle:hover{ background:rgba(226,189,122,1); }
.sr-toggle:active{ transform:scale(.95); }
.sr-tic{ font-size:16px; line-height:1; }
.sr-track{ flex:1 1 auto; height:6px; border-radius:4px; cursor:pointer;
  background:rgba(239,231,216,.16); overflow:hidden; }
.sr-fill{ height:100%; width:0%; border-radius:4px; background:var(--gold-soft,#e2bd7a); transition:width .15s linear; }
.sr-time{ flex:0 0 auto; font-size:12px; color:var(--porcelain-dim,#b3a492); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
.sr-cap{ font-size:12.5px; letter-spacing:.04em; color:var(--porcelain-dim,#b6a896);
  text-transform:uppercase; opacity:.9; }
@keyframes srPulse{
  0%,100%{ box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 0 0 rgba(200,146,63,.45); }
  55%    { box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 0 16px rgba(200,146,63,0); }
}
@media (prefers-reduced-motion:reduce){ .sr-play{ animation:none; } }