/* R20: R19 speech + cleaner picker badges, no overlapping + controls. */
.owned-slot{position:relative;min-width:0;min-height:0;height:100%}
.story-picker-content .owned-grid .owned-slot .owned{width:100%;height:100%;padding-bottom:52px}
.owned-slot .owned-speaker{appearance:none;position:absolute;z-index:5;right:8px;bottom:8px;
 display:grid;place-items:center;width:38px;height:38px;padding:0;
 background:#eaf8f0;border:0;border-radius:50%;color:#078b52;cursor:pointer;
 box-shadow:0 2px 6px rgba(6,108,63,.13);touch-action:manipulation}
.owned-slot .owned-speaker .speakerIcon{width:24px;height:24px;display:block;fill:currentColor}
.owned-slot .owned-speaker:active{transform:scale(.90)}
.owned-slot .owned-speaker.speaking{animation:r19OwnedSpeakerPulse .46s ease-in-out infinite;
 box-shadow:0 0 0 5px rgba(25,183,101,.13),0 0 20px rgba(25,183,101,.58)}
.owned-slot .owned-speaker.speaking .speakerIcon{animation:r19OwnedSpeakerTalk .23s ease-in-out infinite alternate}
@keyframes r19OwnedSpeakerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes r19OwnedSpeakerTalk{from{transform:scale(.92)}to{transform:scale(1.12)}}
.owned-slot .owned-speaker:focus-visible{outline:3px solid #66b4f0;outline-offset:2px}
@media(max-width:360px){.story-picker-content .owned-grid .owned-slot .owned{padding-bottom:48px}.owned-slot .owned-speaker{width:35px;height:35px;right:6px;bottom:7px}}
@media(prefers-reduced-motion:reduce){.owned-slot .owned-speaker.speaking,.owned-slot .owned-speaker.speaking .speakerIcon{animation:none}}

/* The full card remains tap-to-select. Only a selected card has a check near its title. */
.story-picker-content .owned-grid .owned-slot .owned .owned-check{display:none!important}
.story-picker-content .owned-grid .owned-slot .owned .owned-word{display:flex;align-items:center;gap:5px;width:100%;min-width:0}
.story-picker-content .owned-grid .owned-slot .owned .owned-selected-tick{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 3px;border-radius:50%;background:#06a964;color:#fff;font-size:14px;font-weight:900;line-height:1}
/* The used marker must not desaturate card artwork or change its text.
   Only the status pill is given a light gray fill. */
.story-picker-content .owned-grid .owned-slot .owned.used:not(.selected){background:#fff;color:#1d2d41}
.story-picker-content .owned-grid .owned-slot .owned.used:not(.selected) .owned-picture img{filter:none;opacity:1}
.story-picker-content .owned-grid .owned-slot .owned.used:not(.selected) .owned-word{color:#1d2d41}
/* A used card remains colorful and selectable. Only its status pill is light gray. */
.story-picker-content .owned-grid .owned-slot .owned .usage-pill-used{
 background:#edf1ef!important;
 color:#087b50;
 border:1px solid #0fa26b;
 border-radius:999px;
 display:inline-flex;align-items:center;width:max-content;max-width:100%;
 padding:3px 6px;font-size:clamp(9px,2.55vw,11px);font-weight:800;line-height:1.4;white-space:nowrap;
}
/* Preserve the filled LINE-green 未利用 pill. The '+' is gone, leaving the
   original status-and-speaker row unobstructed. */
@media(max-width:360px){
 .story-picker-content .owned-grid .owned-slot .owned .usage-pill-used{font-size:clamp(9px,2.6vw,11px)}
}