/* ================= 刹车大师 =================
   首页右侧第四枚悬浮气泡，与「数字西湖」「反省墙」「五十三参」同一容器 #side-bubbles。
   配色取刹车大师页的熔岩橙（#ff845c / #ff5d3a），与游戏主按钮一致。
   ---------------------------------------------------- */
#brake-bubble{
    position:relative;
    display:block;
    width:56px;
    background:none;
    border:0;
    color:#fff2ea;
    text-align:center;
    text-decoration:none;
    transition:transform .34s cubic-bezier(.2,.8,.24,1), filter .34s;
    -webkit-tap-highlight-color:transparent;
    outline:none;
}

/* 外晕：一点熔岩呼吸 */
#brake-bubble::before{
    content:"";
    position:absolute;
    right:-16px;
    top:-16px;
    bottom:-16px;
    left:-16px;
    border-radius:44px;
    background:radial-gradient(58% 46% at 76% 50%, rgba(255,109,58,.45), rgba(255,109,58,0) 72%);
    z-index:-1;
    animation:brake-breath 6.4s ease-in-out infinite;
}

/* 气泡本体：熔岩橙 */
#brake-bubble .brake-core{
    position:relative;
    z-index:1;
    display:block;
    padding:17px 0 15px;
    border-radius:28px 0 0 28px;
    background:linear-gradient(158deg,#ff9a6b 0%,#ff5d3a 46%,#a33315 100%);
    box-shadow:
        0 8px 26px rgba(163,51,21,.32),
        inset 0 0 0 1px rgba(255,255,255,.22);
}

/* 顶部一枚码表（内联 SVG，见模板） */
#brake-bubble .brake-ico{
    display:block;
    width:16px;
    height:16px;
    margin:0 auto 10px;
    filter:drop-shadow(0 0 5px rgba(255,224,200,.6));
}

/* 竖排站名 */
#brake-bubble .brake-txt{
    display:inline-block;
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-size:15px;
    font-weight:600;
    letter-spacing:5px;
    line-height:1;
    text-shadow:0 1px 2px rgba(0,0,0,.22);
}

#brake-bubble:hover,
#brake-bubble:focus{
    transform:translateX(-5px);
    filter:brightness(1.08);
    color:#ffffff;
}
#brake-bubble:hover .brake-core,
#brake-bubble:focus .brake-core{
    box-shadow:
        0 10px 32px rgba(163,51,21,.44),
        inset 0 0 0 1px rgba(255,255,255,.36);
}
#brake-bubble:active{ transform:translateX(-2px); }

@keyframes brake-breath{
    0%,100%{ opacity:.40; transform:scale(.94); }
    50%    { opacity:.90; transform:scale(1.08); }
}

/* 窄屏收敛，别挡正文 */
@media (max-width:768px){
    #brake-bubble{ width:44px; }
    #brake-bubble .brake-core{ padding:13px 0 12px; border-radius:22px 0 0 22px; }
    #brake-bubble .brake-ico{ width:12px; height:12px; margin-bottom:8px; }
    #brake-bubble .brake-txt{ font-size:13px; letter-spacing:3px; }
    #brake-bubble::before{ right:-10px; top:-10px; bottom:-10px; left:-10px; border-radius:34px; }
}

@media (prefers-reduced-motion:reduce){
    #brake-bubble::before{ animation:none; opacity:.65; }
    #brake-bubble{ transition:none; }
}