/* ============================================================
 *  gma-player · 怪叔叔媒体播放器（音频 / 视频）共享样式
 *  深色玻璃质感 + 橙色高光，自适应手机与 PC
 * ============================================================ */
.gma-player{
    position:relative;
    box-sizing:border-box;
    margin:20px 0;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;
}
.gma-player *{ box-sizing:border-box; }
.gma-player [hidden]{ display:none !important; }

/* 通用：标题行 */
.gma-head{
    display:flex; align-items:center; gap:11px;
    width:100%;
}
.gma-ico{
    flex:none; width:34px; height:34px; border-radius:10px;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:17px; color:#fff;
    background:linear-gradient(135deg,#ffa24d,#ff6f0f);
    box-shadow:0 4px 12px rgba(255,120,20,.4);
}
.gma-title{
    min-width:0; flex:1 1 auto;
    font-size:14px; font-weight:600; letter-spacing:.2px;
    color:#eef1f6;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gma-close{
    flex:none; width:28px; height:28px; border-radius:50%;
    border:none; cursor:pointer;
    background:rgba(255,255,255,.10); color:#c6ccda; font-size:13px; line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    transition:background .15s,color .15s,transform .15s;
}
.gma-close:hover{ background:rgba(255,86,86,.9); color:#fff; transform:rotate(90deg); }

/* 通用：控制条 */
.gma-ctrl{
    display:flex; align-items:center; gap:11px;
    width:100%; user-select:none; -webkit-user-select:none;
}
.gma-play{
    flex:none; width:42px; height:42px; border-radius:50%;
    border:none; cursor:pointer; color:#fff; font-size:15px;
    display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#ffa84f,#ff6a0c);
    box-shadow:0 7px 18px rgba(255,110,15,.5);
    transition:transform .12s,box-shadow .15s,filter .15s;
}
.gma-play:hover{ transform:scale(1.07); filter:brightness(1.05); }
.gma-play:active{ transform:scale(.95); }
.gma-cur,.gma-dur{
    flex:none; min-width:38px; text-align:center;
    font-size:12px; color:#c2c8d6; font-variant-numeric:tabular-nums;
}
.gma-dur{ color:#8f96a6; }

/* 进度条 */
.gma-bar{
    position:relative; flex:1 1 auto; height:22px; cursor:pointer;
    display:flex; align-items:center; touch-action:none;
}
.gma-bar::before{
    content:''; position:absolute; left:0; right:0; height:5px; border-radius:99px;
    background:rgba(255,255,255,.16);
}
.gma-fill{
    position:absolute; left:0; height:5px; width:0; border-radius:99px;
    background:linear-gradient(90deg,#ffb25e,#ff6a00);
    box-shadow:0 0 12px rgba(255,120,20,.65);
}
.gma-knob{
    position:absolute; left:0; width:15px; height:15px; border-radius:50%;
    background:#fff; transform:translateX(-50%);
    box-shadow:0 0 0 4px rgba(255,140,64,.28),0 2px 7px rgba(0,0,0,.45);
    opacity:0; transition:opacity .15s; pointer-events:none;
}
.gma-bar:hover .gma-knob,
.gma-player.gma-dragging .gma-knob{ opacity:1; }

/* 播放窗口（视频） */
.gma-stage{
    position:relative; width:100%;
    background:#000;
}
.gma-stage .gma-el{
    display:block; width:100%; height:100%;
    background:#000;
}

/* ---------- 音频：深色玻璃卡 ---------- */
.gma-audio{
    padding:15px 18px 14px; border-radius:18px;
    background:linear-gradient(135deg,#2a2f3b 0%,#181b22 100%);
    box-shadow:0 12px 32px rgba(20,22,30,.28), inset 0 1px 0 rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.06);
    overflow:hidden;
}
.gma-audio .gma-stage{ display:none; }
.gma-audio .gma-el{ display:none; }
.gma-audio .gma-head{ margin-bottom:11px; }
/* 播放中的音频图标：换成跳动的均衡条 */
.gma-audio.is-playing .gma-ico{ background:linear-gradient(135deg,#33d6a6,#0aa574); box-shadow:0 4px 14px rgba(20,190,140,.5); }
.gma-audio.is-playing .gma-ico::before{ content:'♪'; font-size:18px; animation:gmaBounce .6s ease-in-out infinite alternate; }
.gma-audio.is-playing .gma-ico{ font-size:0; }
@keyframes gmaBounce{ from{ transform:translateY(-2px);} to{ transform:translateY(2px);} }

/* ---------- 视频：黑场 + 底部信息/控制 ---------- */
.gma-video{
    border-radius:16px; overflow:hidden; background:#000;
    box-shadow:0 16px 44px rgba(0,0,0,.38);
    border:1px solid rgba(255,255,255,.06);
}
.gma-video .gma-stage{ aspect-ratio:16 / 9; }
.gma-video .gma-el{ object-fit:contain; }
.gma-video .gma-head{
    padding:11px 15px 4px;
    background:linear-gradient(180deg,#20242d,#161921);
}
.gma-video .gma-ctrl{
    padding:7px 15px 14px;
    background:#161921;
}
.gma-video .gma-play{ width:38px; height:38px; }
/* 视频中央大播放键（未播放时） */
.gma-vbig{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:66px; height:66px; border-radius:50%; border:none; cursor:pointer;
    color:#fff; font-size:24px; display:none;
    align-items:center; justify-content:center;
    background:rgba(255,120,20,.92);
    box-shadow:0 8px 26px rgba(0,0,0,.5),0 0 0 8px rgba(255,255,255,.08);
    transition:transform .15s;
}
.gma-vbig:hover{ transform:translate(-50%,-50%) scale(1.08); }
.gma-video:not(.is-playing) .gma-vbig{ display:inline-flex; }
.gma-video.is-buffering .gma-vbig{ background:rgba(30,34,44,.7); }

/* ---------- 关闭后：折叠为可重新展开的小条 ---------- */
.gma-reopen{
    display:none; width:100%; text-align:left; cursor:pointer;
    align-items:center; gap:9px;
    padding:10px 14px; border-radius:12px;
    border:1px dashed rgba(120,130,150,.5);
    background:rgba(120,130,150,.08); color:#747d8f; font-size:13px;
}
.gma-reopen b{ color:#ff8a3d; font-weight:600; }
.gma-reopen:hover{ background:rgba(255,138,61,.1); border-color:#ff8a3d; color:#ff8a3d; }
.gma-player.gma-closed{ margin:14px 0; }
.gma-player.gma-closed .gma-stage,
.gma-player.gma-closed .gma-head,
.gma-player.gma-closed .gma-ctrl{ display:none !important; }
.gma-player.gma-closed.gma-audio,
.gma-player.gma-closed.gma-video{
    padding:0; background:transparent; border:none; box-shadow:none; overflow:visible;
}
.gma-player.gma-closed .gma-reopen{ display:inline-flex; }

/* 缓冲提示 */
.gma-spin{
    position:absolute; top:50%; left:50%; width:42px; height:42px; margin:-21px 0 0 -21px;
    border:3px solid rgba(255,255,255,.25); border-top-color:#ff8a3d; border-radius:50%;
    animation:gmaRot .8s linear infinite; display:none; pointer-events:none;
}
.gma-player.is-buffering .gma-spin{ display:block; }
@keyframes gmaRot{ to{ transform:rotate(360deg); } }

/* 编辑器内：媒体块悬浮提示 */
#editor .gma-player{ outline:2px solid transparent; transition:outline-color .15s; }
#editor .gma-player:hover{ outline-color:rgba(255,138,61,.55); }

/* ---------- 手机端微调 ---------- */
@media (max-width:520px){
    .gma-audio{ padding:13px 14px 12px; border-radius:15px; }
    .gma-video .gma-head{ padding:10px 12px 3px; }
    .gma-video .gma-ctrl{ padding:6px 12px 12px; gap:9px; }
    .gma-play{ width:40px; height:40px; }
    .gma-video .gma-play{ width:36px; height:36px; }
    .gma-cur,.gma-dur{ min-width:34px; font-size:11px; }
    .gma-knob{ width:16px; height:16px; opacity:1; }   /* 触屏常显拖柄，便于发现可拖动 */
}