/* ═══════════════════════════════════════════
   TapaBoom — Player Bar
   Bottom player, waveform, controls
   ═══════════════════════════════════════════ */

.player{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(180deg,#1e1e1e 0%,#141414 100%);border-top:1px solid #333;z-index:200;transform:translateY(100%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);box-shadow:0 -8px 40px rgba(0,0,0,0.7),0 -2px 8px rgba(0,0,0,0.4)}
.player.visible{transform:translateY(0)}
.player-wave{width:100%;height:48px;cursor:pointer;position:relative}
.player-wave canvas{width:100%;height:48px;display:block}
.player-bottom{display:flex;align-items:center;gap:14px;max-width:900px;margin:0 auto;padding:10px 24px 16px}
.player .p-thumb{width:56px;height:56px;border-radius:14px;overflow:hidden;flex-shrink:0;cursor:pointer;position:relative;box-shadow:0 2px 12px rgba(0,0,0,0.4)}
.player .p-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.player .p-thumb .p-thumb-frame{position:absolute;inset:0;border:2px solid rgba(255,255,255,0.08);border-radius:14px;pointer-events:none}
.player .p-btn{width:48px;height:48px;border-radius:50%;border:2px solid #444;background:transparent;color:#eee;cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s}
.player .p-btn:hover{border-color:#60a5fa;background:#0f1a2e}
.player .p-info{display:flex;flex-direction:column;min-width:80px;max-width:200px;flex-shrink:0;gap:2px}
.player .p-name{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.player .p-name:hover{color:#60a5fa}
.player .p-sub{font-size:10px;color:#4b5563;font-family:monospace}
.player .p-spacer{flex:1}
.player .p-time{font-size:10px;color:#555;font-family:monospace;min-width:36px;flex-shrink:0}
.loop-wrap{display:flex;align-items:center;gap:2px;flex-shrink:0}
.loop-btn{width:32px;height:32px;border-radius:8px;border:1px solid #333;background:transparent;color:#666;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
.loop-btn:hover{border-color:#60a5fa;color:#60a5fa}
.loop-btn.active{border-color:#60a5fa;color:#60a5fa;background:#0f1a2e}
.loop-label{font-size:9px;color:#60a5fa;font-family:monospace;min-width:14px}
.loud-warn{font-size:10px;color:#f97316;font-weight:700;margin-left:4px;display:none}
.loud-warn.show{display:inline}