.playback-queue-panel[hidden],.playback-queue-launcher[hidden],.playback-queue-panel [hidden]{display:none!important}
body .queue-player-anchor{min-height:var(--player-min-height);max-height:max(var(--player-min-height),var(--queue-video-height))}
.playback-queue-panel{position:fixed;z-index:45;top:var(--queue-top,30%);right:0;bottom:var(--queue-bottom,0px);left:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;color:var(--c-navy);background:var(--c-white);border:1px solid var(--c-border);border-radius:var(--radius-l) var(--radius-l) 0 0;box-shadow:var(--shadow-float);font-family:var(--font-body)}
.playback-queue-heading{display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-8);flex:none}
.queue-heading-copy{display:flex;flex-direction:column;flex:1;min-width:0}
.playback-queue-heading h2{margin:0;font-size:var(--fs-ui-compact);line-height:var(--lh-tight);white-space:nowrap}
.queue-position{font-size:var(--fs-ui-meta);font-weight:400;line-height:var(--lh-tight);font-variant-numeric:tabular-nums;white-space:nowrap}
.queue-icon-button{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:var(--radius-m);background:transparent;color:var(--c-navy);font:inherit;cursor:pointer}
.queue-icon-button:hover,.queue-item-play:hover{background:var(--c-bg-soft)}
.queue-icon-button:disabled,.queue-item-play:disabled{color:var(--c-text-sub);cursor:default}
:is(.queue-icon-button,.queue-item-play,.playback-queue-launcher):focus-visible{outline:var(--focus-ring);outline-offset:calc(-1 * var(--sp-4))}
:is(.queue-icon-button,.playback-queue-launcher,.queue-item-thumbnail,.site-playback-controls,.queue-share) svg{width:var(--sp-24);height:var(--sp-24);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.queue-panel-actions{display:flex;align-items:center;flex:none;padding:0}
.playback-queue-panel .queue-icon-button svg{width:var(--sp-16);height:var(--sp-16)}
.queue-icon-button[aria-pressed=true]{background:var(--c-bg-soft);color:var(--c-pink-strong)}
.queue-repeat-one{margin-left:var(--sp-2);font-size:var(--fs-ui-small);font-weight:800;line-height:var(--lh-tight)}
.playback-queue-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:calc(var(--sp-8) + env(safe-area-inset-bottom));scrollbar-gutter:stable}
.playback-queue-list{display:flex;flex-direction:column;gap:var(--sp-4);margin:0;padding:var(--sp-8) 0;list-style:none}
.queue-item{display:grid;grid-template-columns:var(--control-h) minmax(0,1fr) var(--control-h);align-items:center;min-width:0;padding:var(--sp-4) 0;color:var(--c-navy)}
.queue-item.is-current{background:var(--c-bg-soft);box-shadow:inset var(--sp-4) 0 var(--c-pink-strong)}
.queue-item.is-dragging{position:relative;z-index:1;background:var(--c-bg-soft);box-shadow:inset 0 0 0 1px var(--c-border-input)}
.queue-drag-handle{touch-action:none;cursor:grab}
.queue-drag-handle:active{cursor:grabbing}
.queue-item-play{display:grid;grid-template-columns:calc(var(--sp-32) * 4) minmax(0,1fr);align-items:center;gap:var(--sp-8);width:100%;min-width:0;min-height:var(--control-h);padding:0;border:0;background:transparent;color:inherit;text-align:left;font-family:inherit;cursor:pointer}
.queue-item-thumbnail{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--c-bg-muted);border-radius:var(--radius-s)}
.queue-item-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.queue-item-copy{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.queue-item-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal);overflow-wrap:anywhere}
.queue-item-author{display:flex;align-items:center;gap:var(--sp-4);min-width:0}
.queue-item-avatar{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:var(--sp-20);height:var(--sp-20);border-radius:50%;overflow:hidden;background:var(--c-bg-soft);color:var(--c-text-sub)}
.queue-item-avatar svg{width:var(--sp-16);height:var(--sp-16);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.queue-item-avatar img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.queue-item-singer{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-ui-small);line-height:var(--lh-normal);color:var(--c-text-sub)}
.queue-help{margin:0;padding:var(--sp-8);color:var(--c-text-sub);font-size:var(--fs-ui-meta);line-height:var(--lh-normal)}
.queue-help:empty{display:none}
.playback-queue-launcher{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--control-h);height:var(--control-h);padding:0;border:1px solid var(--c-border);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-navy);cursor:pointer}
.playback-queue-launcher:hover{background:var(--c-bg-soft)}
.playback-queue-launcher[aria-expanded=true]{border-color:var(--c-role-common);background:var(--c-bg-soft);color:var(--c-role-common)}
body:has(.playback-queue-panel:not([hidden])) .site-playback-minimize{visibility:hidden;pointer-events:none}
.queue-button{flex:none;min-height:var(--control-h);padding:var(--sp-8) var(--sp-12);border:1px solid var(--c-border-input);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-navy);font:inherit;font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-normal);cursor:pointer}
.queue-button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.queue-button:disabled{color:var(--c-text-sub);background:var(--c-bg-muted);cursor:default}
.queue-work-actions{display:flex;align-items:center;flex:none}
.queue-work-action{flex:none;display:flex;align-items:center;justify-content:center;width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:var(--radius-m);background:transparent;color:var(--c-text-sub);font:inherit;cursor:pointer}
.queue-work-action svg{width:var(--sp-16);height:var(--sp-16);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.work-tile>.work-caption,.list-work-card>.list-work-caption{padding-right:var(--sp-4)}
.work-title-row{display:flex;align-items:flex-start;gap:var(--sp-4)}
.work-title-row>h3,.work-title-row>.list-work-title{flex:1;min-width:0}
.work-title-row>.queue-work-actions{margin-top:calc(-1 * var(--sp-8));margin-bottom:calc(-1 * var(--sp-12))}
.queue-work-action:hover{background:var(--c-bg-soft)}
body[data-festival-ux] .queue-work-action:hover:not(:active){transform:none}
@media(min-width:960px){
 /* PCのキューは画面の右端のサイドパネル（情報パネルと同じ幅）。上下は --queue-top・--queue-bottom（ヘッダーの下から画面の下端） */
 .playback-queue-panel{left:auto;right:0;width:var(--side-panel-user-width,var(--side-panel-size));max-width:60%;min-width:var(--side-panel-min-width);border:0;border-left:1px solid var(--c-border);border-radius:0}
}

.queue-source-tabs{display:flex;flex:none;gap:var(--sp-4);padding:0 var(--sp-8);overflow-x:auto;overscroll-behavior-inline:contain}
.queue-source-tab,.queue-login,.queue-share{display:flex;align-items:center;flex:none;min-height:var(--control-h);padding:0;border:0;background:transparent;color:var(--c-navy);font:inherit;font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal);white-space:nowrap;cursor:pointer}
.queue-source-tab-label,.queue-login-label,.queue-share-label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--sp-32);padding:var(--sp-4) var(--sp-12);border:1px solid var(--c-border-input);border-radius:var(--radius-m);background:var(--c-white)}
.queue-source-tab[aria-selected=true] .queue-source-tab-label{background:var(--c-navy);color:var(--c-white);border-color:var(--c-navy)}
.queue-source-item{grid-template-columns:minmax(0,1fr) var(--control-h);padding-inline:var(--sp-12) 0}
.queue-login{display:inline-flex;margin:0 var(--sp-16) var(--sp-12)}
.queue-share{display:inline-flex;margin:0 var(--sp-8)}
.queue-share-label{gap:var(--sp-4)}
.queue-share svg{width:var(--sp-16);height:var(--sp-16)}

.queue-mock-player{position:fixed;z-index:30;right:0;bottom:env(safe-area-inset-bottom);width:100%;background:var(--c-navy-deep);color:var(--c-white)}
.queue-mock-player[hidden]{display:none}
.queue-mock-stage{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.queue-mock-player[data-mode=mini] .queue-mock-stage{width:min(100%,calc(var(--queue-mini-video-height,0px) * 16 / 9));min-height:0;margin-inline:auto}
.queue-mock-stage img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:.25;pointer-events:none}
.queue-mock-stage p,.queue-mock-stage button{position:relative;z-index:1}
[data-edge=bottom] .queue-mock-dock svg[data-dock=bottom],[data-edge=top] .queue-mock-dock svg[data-dock=top]{display:none}
.queue-mock-controls{position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));align-items:center;height:var(--mini-player-controls-height);background:var(--c-bg-muted);color:var(--c-navy)}
.queue-mock-controls::after{content:"";position:absolute;z-index:1;inset:0;border-block:1px solid var(--c-navy);pointer-events:none}
.queue-mock-controls button{min-width:0;width:100%;height:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:var(--fs-18);cursor:pointer}
@media(min-width:960px){.queue-mock-player{width:var(--mini-player-width);max-width:var(--mini-player-width)}}

:is(.site-playback-control,.queue-mock-controls button)[data-footprint-recorded="true"] svg{color:var(--c-aqua-text);fill:currentColor;stroke:none}
@keyframes footprint-pop{0%{transform:scale(1) rotate(0)}30%{transform:scale(.7) rotate(-14deg)}65%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes footprint-ring{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.7);opacity:0}}
:is(.site-playback-control,.queue-mock-controls button)[data-footprint-pop="true"]{position:relative}
:is(.site-playback-control,.queue-mock-controls button)[data-footprint-pop="true"] svg{transform-box:fill-box;transform-origin:center;animation:footprint-pop var(--motion-footprint-pop) var(--ease-festival)}
:is(.site-playback-control,.queue-mock-controls button)[data-footprint-pop="true"]::after{content:"";position:absolute;top:50%;left:50%;width:var(--sp-24);height:var(--sp-24);margin:calc(var(--sp-12) * -1) 0 0 calc(var(--sp-12) * -1);border:2px solid var(--c-aqua-text);border-radius:50%;pointer-events:none;animation:footprint-ring var(--motion-footprint-pop) var(--ease-festival) forwards}
@media (prefers-reduced-motion: reduce){:is(.site-playback-control,.queue-mock-controls button)[data-footprint-pop="true"] svg,:is(.site-playback-control,.queue-mock-controls button)[data-footprint-pop="true"]::after{animation:none}}
.queue-mock-controls button svg{width:var(--sp-16);height:var(--sp-16);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.work-details-avatar{width:var(--sp-32);height:var(--sp-32);border-radius:50%;object-fit:cover}
.queue-mock-player[data-edge=top]{bottom:auto}

.queue-mock-player{border:0;border-radius:0}
.queue-mock-player [hidden]{display:none!important}
.queue-mock-player[data-mode=inline]{position:fixed;right:auto;bottom:auto;max-width:none}
#work-mock-slot{margin-bottom:var(--mini-player-controls-height)}
.queue-mock-minimize{display:grid;place-items:center;position:absolute;top:100%;left:50%;transform:translateX(-50%);width:calc(var(--sp-40) * 3);height:var(--sp-20);padding:0;border:1px solid var(--c-border);border-top:0;border-radius:0 0 var(--radius-l) var(--radius-l);background:var(--c-white);color:var(--c-navy);cursor:pointer}
.queue-mock-minimize svg{width:var(--sp-16);height:var(--sp-16);fill:none;stroke:currentColor;stroke-width:2}
body.has-mock-work-page .page-frame{min-height:0!important}

body.has-mock-work-page .page-body[hidden],#work-mock-page[hidden]{display:none}

.queue-mock-player[data-mode=inline] .queue-mock-stage{height:var(--queue-video-height);width:min(100%,calc(var(--queue-video-height) * 16 / 9));margin-inline:auto}

:is(.site-playback-control,.queue-mock-controls button)[data-note-rated="true"] .queue-note-star{fill:var(--c-star);stroke:none}
:is(.site-playback-control,.queue-mock-controls button)[data-note-rated="true"] .queue-note-board{fill:var(--c-navy);stroke:none}
:is(.site-playback-control,.queue-mock-controls button)[data-note-pop="true"]{position:relative;overflow:hidden}
:is(.site-playback-control,.queue-mock-controls button)[data-note-pop="true"] svg{transform-box:fill-box;transform-origin:center;animation:footprint-pop var(--motion-footprint-pop) var(--ease-festival)}
:is(.site-playback-control,.queue-mock-controls button)[data-note-pop="true"]::after{content:"";position:absolute;top:50%;left:50%;width:var(--sp-24);height:var(--sp-24);margin:calc(var(--sp-12) * -1) 0 0 calc(var(--sp-12) * -1);border:2px solid var(--c-star);border-radius:50%;pointer-events:none;animation:footprint-ring var(--motion-footprint-pop) var(--ease-festival) forwards}
@media (prefers-reduced-motion: reduce){:is(.site-playback-control,.queue-mock-controls button)[data-note-pop="true"] svg,:is(.site-playback-control,.queue-mock-controls button)[data-note-pop="true"]::after{animation:none}}

:is(.site-playback-control,.queue-mock-controls button):disabled{color:var(--c-text-sub);cursor:default}