/*
----------------------------------------
Numeon Website
Version 1.0

return-banner.css

"Return to your game" 横幅。

固定在屏幕底部中央，
电脑版和手机版都能自然看到：

  · 底部而不是顶部——
    顶部在手机上会和浏览器地址栏、
    站内顶栏挤在一起；
    底部是拇指最容易够到的位置。

  · fixed 而不是跟着页面滚动——
    这条提示带着 45 秒的倒计时，
    滚到页面下方就看不见了不行。

配色沿用 game.css 里的变量，
所以引用它的页面必须也引了 game.css。
----------------------------------------
*/

#return-banner {
    display: none;

    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);

    /* 比抽屉遮罩（45）高，
       这样抽屉开着的时候也能看到倒计时；
       比弹窗（通常 100+）低，
       不去挡住登录框之类的东西。 */
    z-index: 60;

    min-width: 300px;
    max-width: calc(100vw - 24px);

    background: var(--panel);
    border: 1px solid var(--line);

    /* 左侧一道绿色，
       和"回到对局"那个按钮呼应，
       让人一眼认出这是关于对局的提示 */
    border-left: 3px solid var(--win, #7aa84f);

    padding: 12px 14px;

    box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}

#return-banner.is-on {
    display: block;
}

#rb-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

#rb-text {
    font-size: 15px;
    color: var(--text-strong);
}

#rb-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

#return-banner button {
    font-family: inherit;
    border: 1px solid var(--line);
    padding: 7px 13px;
    font-size: 14px;
    background: var(--panel-hi);
    color: var(--text-strong);
    transition: background .12s, border-color .12s;
}

/* ---- 绿色：回到对局 ---- */

#rb-go {
    background: var(--win, #7aa84f);
    border-color: var(--win, #7aa84f);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    padding: 7px 15px;
}

#rb-go:hover {
    filter: brightness(1.12);
}

/* ---- 蓝色：退出（第一下）---- */

#rb-quit {
    background: #3b6ea5;
    border-color: #3b6ea5;
    color: #fff;
}

#rb-quit:hover {
    filter: brightness(1.12);
}

/* ---- 确认态：红边黑底 → 红底 ----

   点一下 quit 之后按钮变成这个样子，
   旁边出现 [x]。
   再点一下才真的判负。

   两步确认是因为
   这个操作会直接判负、扣等级分、不可撤销，
   而按钮就紧挨着绿色的返回键。 */

#rb-quit.is-confirming {
    background: var(--loss, #b04a4a);
    border-color: var(--loss, #b04a4a);
    color: #fff;
}

/* ---- [x] 取消确认 ---- */

#rb-cancel {
    background: none;
    border-color: var(--line);
    color: var(--muted);
    padding: 7px 11px;
    line-height: 1;
}

#rb-cancel:hover {
    color: var(--text-strong);
    border-color: var(--text-strong);
}

.rb-hidden {
    display: none !important;
}

/* ---- 红色倒计时 ---- */

#rb-countdown {
    margin-top: 7px;
    font-size: 13px;
    color: var(--loss, #b04a4a);
}


/* =====================================
   手机版
   =====================================

   横幅左右撑满（留一点边距），
   按钮加大到手指点得准的尺寸。

   文字和按钮分成两行：
   一行放不下"Return to your game"
   加三个按钮。 */

@media (max-width: 900px) {

    #return-banner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        transform: none;
        min-width: 0;
        max-width: none;
        padding: 12px;
    }

    #rb-main {
        flex-wrap: wrap;
        gap: 10px;
    }

    #rb-text {
        flex: 1 1 100%;
        font-size: 15px;
    }

    #rb-actions {
        flex: 1 1 100%;
        margin-left: 0;
    }

    /* 让两个主按钮均分宽度，
       [x] 只占自己需要的宽度。 */

    #rb-go,
    #rb-quit {
        flex: 1 1 0;
        padding: 11px 12px;
        font-size: 15px;
    }

    #rb-cancel {
        flex: 0 0 auto;
        padding: 11px 14px;
    }
}