/* 移植自 SPARICA public/assets/css/apps/reel.css(2026-10-16),只改了字体路径(放在本插件 assets/fonts/) */
/* ============================================================
   Reel-to-Reel Tape Recorder — 开盘机复古播放器
   ============================================================ */

@font-face {
    font-family: "BitcountGridReelCounter";
    src: url("fonts/BitcountGridSingle_Cursive-Light.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "ReelPlaylistPixelCn";
    src: url("fonts/WenQuanYi.Bitmap.Song.14px.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.reel-app {
    position: relative;
    height: 100%; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #3a2518 0%, #2a1a10 100%);
    font-family: "Courier New", "Consolas", monospace;
    color: #e8d5b8; user-select: none; overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

.reel-app,
.reel-app * {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.reel-loading {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(18, 11, 8, .82) 0%, rgba(18, 11, 8, .9) 100%),
        linear-gradient(180deg, #5c3a21 0%, #4a2e18 40%, #3a2010 100%);
}

.reel-loading[hidden] {
    display: none;
}

.reel-loading-text {
    font-size: 12px;
    letter-spacing: 2px;
    color: #d7c2a0;
    text-transform: uppercase;
}

.reel-app.is-loading .reel-body {
    visibility: hidden;
}

/* 木纹机身 */
.reel-body {
    flex: 1; display: flex; flex-direction: column;
    background:
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px),
        linear-gradient(180deg, #5c3a21 0%, #4a2e18 40%, #3a2010 100%);
    border: 2px solid #2a1508;
    box-shadow: inset 0 1px 0 rgba(255,220,180,.15), 0 4px 20px rgba(0,0,0,.6);
    overflow: hidden;
}

/* 品牌标签 */
.reel-brand {
    text-align: center; padding: 6px 0 2px;
    font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
    color: #c9a87a; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* 磁带盘区域 */
.reel-deck {
    display: flex; justify-content: center; align-items: center;
    gap: 40px; padding: 10px 16px;
    background: linear-gradient(180deg, rgba(0,0,0,.15), transparent);
    position: relative;
}

/* 磁带走带路径 */
.reel-tape-path {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60px; height: 2px;
    background: linear-gradient(90deg, #1a1008, #3a2818, #1a1008);
    opacity: .6;
}

/* 单个磁带盘 */
.reel-spool {
    width: 110px; height: 110px; border-radius: 50%; position: relative;
    background: radial-gradient(circle at 40% 35%, #444, #1a1a1a);
    box-shadow: 0 2px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
    border: 2px solid #555;
}
.reel-spool.playing { animation: reel-spin 2s linear infinite; }
.reel-spool.paused { animation: reel-spin 2s linear infinite; animation-play-state: paused; }
.reel-spool.rewinding-left { animation: reel-rewind-left .55s linear infinite; }
.reel-spool.rewinding-right { animation: reel-rewind-right .55s linear infinite; }

@keyframes reel-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes reel-rewind-left {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes reel-rewind-right {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 盘芯 */
.reel-hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #888, #444);
    border: 1px solid #666;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.2);
}
.reel-hub::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: #222; border: 1px solid #555;
}

/* 磁带圈（模拟磁带量） */
.reel-tape-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, #2a1a0a 30%, #1a0e05 100%);
    border: 1px solid rgba(255,255,255,.05);
    transition: width .5s, height .5s;
}
.reel-spool-left .reel-tape-ring { width: 90px; height: 90px; }
.reel-spool-right .reel-tape-ring { width: 50px; height: 50px; }

/* 盘上的辐条 */
.reel-spoke {
    position: absolute; top: 50%; left: 50%;
    width: 2px; height: 40px; background: #555;
    transform-origin: top center;
}
.reel-spoke:nth-child(1) { transform: translate(-50%, 0) rotate(0deg); }
.reel-spoke:nth-child(2) { transform: translate(-50%, 0) rotate(120deg); }
.reel-spoke:nth-child(3) { transform: translate(-50%, 0) rotate(240deg); }

/* VU 表 */
.reel-vu-section {
    display: flex; justify-content: center; gap: 24px; padding: 4px 16px;
}
.reel-vu {
    width: 80px; height: 48px; position: relative;
    background: linear-gradient(180deg, #f5f0e0, #e8dcc8);
    border-radius: 4px 4px 0 0;
    border: 1px solid #8a7a60;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
    overflow: hidden;
}
.reel-vu-label {
    position: absolute; bottom: 2px; width: 100%; text-align: center;
    font-size: 7px; color: #5a4a30; letter-spacing: 1px; text-transform: uppercase;
}
.reel-vu-scale {
    position: absolute; top: 6px; left: 8px; right: 8px; height: 20px;
    border-bottom: 1px solid #aaa;
    background: repeating-linear-gradient(90deg, #999 0px, #999 1px, transparent 1px, transparent 8px);
    background-size: 8px 6px; background-position: bottom;
    background-repeat: repeat-x;
}
.reel-vu-scale::after {
    content: ''; position: absolute; right: 0; top: 0; width: 30%;
    height: 100%; background: rgba(255,0,0,.08);
}
.reel-vu-needle {
    position: absolute; bottom: 4px; left: 50%;
    width: 2px; height: 32px;
    background: linear-gradient(180deg, #c00, #800);
    transform-origin: bottom center;
    transform: rotate(-40deg);
    transition: transform .15s ease-out;
    border-radius: 1px 1px 0 0;
}
.reel-vu-pivot {
    position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: #333; border: 1px solid #555;
}

/* 信息显示区 */
.reel-display {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; padding: 4px 16px;
}
.reel-status {
    margin: 0 16px 6px;
    padding: 4px 8px;
    border: 1px solid rgba(255, 210, 150, .24);
    background: rgba(30, 18, 10, .72);
    color: #f2d2a1;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}
.reel-counter {
    font-family: "BitcountGridReelCounter", "Consolas", "Courier New", monospace;
    font-size: 20px; font-weight: 700;
    color: #ffcc66; letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(255,200,80,.4);
    background: #1a1008; padding: 3px 10px;
    border: 1px solid #3a2a18;
    border-radius: 3px;
}
.reel-track-name {
    flex: 1; font-size: 11px; color: #c9a87a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: center;
}
.reel-speed-indicator {
    font-size: 8px; color: #8a7a60; letter-spacing: 1px;
}

/* 控制按钮区 */
.reel-controls {
    display: flex; justify-content: center; align-items: center;
    gap: 6px; padding: 6px 16px;
}
.reel-btn {
    width: 36px; height: 36px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #3a3a3a, #1a1a1a);
    border: 2px solid #555;
    box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.1);
    color: #ccc; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .1s;
}
.reel-btn:active {
    box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 2px 4px rgba(0,0,0,.3);
    transform: translateY(1px);
}
.reel-btn:hover { border-color: #888; }
.reel-btn.active { border-color: #ffcc66; color: #ffcc66; }
.reel-btn.playing {
    border-color: #ffcc66;
    color: #ffcc66;
    background: radial-gradient(circle at 40% 35%, #4a4032, #21160d);
    box-shadow: 0 0 10px rgba(255, 180, 60, .35), inset 0 1px 0 rgba(255,255,255,.12);
    transform: none;
}

/* 进度条 */
.reel-seek-wrap {
    margin: 0 16px; height: 6px;
    background: #1a1008; border: 1px solid #3a2a18;
    border-radius: 3px; position: relative; cursor: pointer;
}
.reel-seek-fill {
    height: 100%; background: linear-gradient(90deg, #8a6a30, #c9a050);
    border-radius: 3px; width: 0%; transition: width .3s linear;
}
.reel-seek-thumb {
    position: absolute; top: -4px; width: 14px; height: 14px;
    background: radial-gradient(circle at 40% 35%, #ccc, #888);
    border: 1px solid #666; border-radius: 50%;
    transform: translateX(-50%); cursor: grab; left: 0%;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* 音量旋钮 */
.reel-knob-row {
    display: flex; justify-content: center; align-items: center;
    gap: 20px; padding: 4px 16px;
}
.reel-knob-group {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.reel-knob-label {
    font-size: 7px; color: #8a7a60; letter-spacing: 1px; text-transform: uppercase;
}
.reel-knob {
    width: 28px; height: 28px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #555, #222);
    border: 2px solid #666;
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
    position: relative; cursor: pointer;
}
.reel-knob-mark {
    position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 8px; background: #ffcc66; border-radius: 1px;
}
.reel-knob-mark-fun {
    transition: transform 160ms ease-out;
    will-change: transform;
}

.reel-lower-panel {
    display: contents;
}

/* 磁盘选择器（底部横向滑动） */
.reel-disc-selector {
    background: linear-gradient(180deg, #1a1008, #0e0a04);
    border-top: 1px solid #3a2a18;
    padding: 6px 0;
    min-height: 72px;
}
.reel-disc-selector-title {
    font-size: 8px; color: #6a5a40; letter-spacing: 2px;
    text-transform: uppercase; text-align: center; padding: 0 0 4px;
}
.reel-disc-scroll {
    display: flex; gap: 10px; overflow-x: auto;
    padding: 0 16px 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.reel-disc-scroll::-webkit-scrollbar { display: none; }

.reel-disc-item {
    flex: 0 0 auto; width: 56px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    cursor: pointer; scroll-snap-align: center;
    opacity: .6; transition: opacity .2s, transform .2s;
    padding: 2px;
}
.reel-disc-item:hover { opacity: .85; }
.reel-disc-item.active { opacity: 1; transform: scale(1.08); }
.reel-disc-item-spin .reel-disc-cover { animation: reel-disc-spin-once .6s ease-out 1; }

.reel-disc-cover {
    width: 44px; height: 44px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #4a3a28, #2a1a0e);
    border: 2px solid #5a4a30;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; overflow: hidden;
}
.reel-disc-cover img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.reel-disc-cover-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    line-height: 1;
}
.reel-disc-item.active .reel-disc-cover {
    border-color: #ffcc66;
    box-shadow: 0 0 8px rgba(255,200,80,.3);
}
.reel-disc-name {
    font-size: 8px; color: #8a7a60; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 56px;
}
.reel-disc-item.active .reel-disc-name { color: #c9a87a; }

@keyframes reel-disc-spin-once {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 播放列表 */
.reel-playlist {
    flex: 1; min-height: 0; overflow-y: auto;
    background: rgba(0,0,0,.2);
    margin: 0 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
    scrollbar-width: thin; scrollbar-color: #3a2a18 transparent;
}
.reel-playlist::-webkit-scrollbar { width: 4px; }
.reel-playlist::-webkit-scrollbar-thumb { background: #3a2a18; border-radius: 2px; }

.reel-pl-track {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    font-size: 10px; color: #a89878;
    border-bottom: 1px solid rgba(255,255,255,.03);
    background: none;
}
.reel-playlist > .reel-pl-track:only-child {
    flex: 1 1 auto;
    min-height: 0;
    align-items: flex-start;
    box-sizing: border-box;
}
.reel-playlist > .reel-pl-track:only-child .reel-pl-main,
.reel-playlist > .reel-pl-track:only-child .reel-pl-fav {
    align-self: flex-start;
    margin-top: 4px;
}
.reel-pl-track.playing { color: #ffcc66; background: rgba(200,160,80,.1); }
.reel-pl-main {
    flex: 1; min-width: 0;
    display: flex; align-items: center;
    padding: 0;
    cursor: pointer;
    font-size: 10px; color: inherit;
    background: none; border: none;
    width: 100%; text-align: left; font-family: inherit;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}
.reel-pl-main:focus,
.reel-pl-main:focus-visible,
.reel-pl-main:hover,
.reel-pl-main:active,
.reel-pl-fav:hover,
.reel-pl-fav:focus,
.reel-pl-fav:focus-visible,
.reel-pl-fav:active {
    outline: none;
    box-shadow: none;
    border: none;
    background: transparent;
}
.reel-pl-main::-moz-focus-inner,
.reel-pl-fav::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.reel-pl-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; position: relative; }
.reel-pl-name-track {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reel-pl-name-text {
    display: inline-block;
    position: relative;
}
.reel-pl-name-text-copy { display: none; }
.reel-pl-name.is-marquee .reel-pl-name-track {
    display: inline-flex;
    align-items: center;
    gap: var(--marquee-gap, 56px);
    width: max-content;
    min-width: 100%;
    animation: reel-pl-marquee var(--marquee-duration, 10s) linear infinite;
    will-change: transform;
}
.reel-pl-name.is-marquee .reel-pl-name-text-copy { display: inline-block; }
.reel-pl-fav {
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255,204,102,.26);
    cursor: pointer;
    padding: 0;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}
.reel-pl-fav[disabled] {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}
.reel-pl-fav.is-favorited {
    color: rgba(255,204,102,.78);
    text-shadow: 0 0 6px rgba(255,200,80,.18);
}
.reel-pl-fav-icon {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
}
.reel-pl-empty { padding: 12px; text-align: center; color: #5a4a30; font-size: 10px; }

/* 指示灯 */
.reel-led-row {
    display: flex; justify-content: center; gap: 12px; padding: 2px 0;
}
.reel-led {
    width: 6px; height: 6px; border-radius: 50%;
    background: #2a1a0a; border: 1px solid #3a2a18;
}
.reel-led.on-green { background: #4a4; box-shadow: 0 0 4px rgba(80,200,80,.5); }
.reel-led.on-amber { background: #ca4; box-shadow: 0 0 4px rgba(200,180,80,.5); }

@keyframes reel-pl-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--marquee-distance, 0px))); }
}

/* 响应式 */
@media (max-width: 480px) {
    .reel-deck { gap: 20px; padding: 6px 8px; }
    .reel-spool { width: 80px; height: 80px; }
    .reel-hub { width: 26px; height: 26px; }
    .reel-spool-left .reel-tape-ring { width: 66px; height: 66px; }
    .reel-spool-right .reel-tape-ring { width: 38px; height: 38px; }
    .reel-spoke { height: 28px; }
    .reel-vu { width: 60px; height: 36px; }
    .reel-vu-needle { height: 24px; }
    .reel-btn { width: 30px; height: 30px; font-size: 10px; }
    .reel-knob { width: 22px; height: 22px; }
}

.reel-app audio { display: none; }