@charset "UTF-8";
/*風格細節調整*/
/*for dashboard*/
:root {
    /*色調*/
    --color-main: #3c3e52;
    --color-border: #3c3e52;
    --color-read: #dfdfdf;
    --color-pair: #72799a;
    --color-scrollbar: rgb(74, 77, 107);
    /*背景顏色*/
    --color-dev: #8ce3dd25;
    --color-bg-main: #262836; /*#252734*/
    --color-bg-second: #1e1f2b;
    --color-bg-popup: #303242; /*#252734*/
    --rd-area: 25px;
    --rd-item: 10px;
    --gap: 10px;
    --gap-mobile: 20px;
    --color-highlight-first: #fff;
    --color-highlight-second: #cfd8fc;
    --color-highlight-third: #b0bceb;
    --bg-nav-mobile: linear-gradient(to bottom, #2628368c 0%, #262836 80%);
    --bg-switch: linear-gradient(to top, #262836b1 0%, #262836 100%);
    --bg-channel-card: linear-gradient(170deg, #6c77a4 0%, #515a7ca4 80%);
    /* --bg-game-card: linear-gradient(30deg, #879ffd 0%, #435084 100%); */
    --font-default: "Nunito", "Noto Sans TC", "PingFang", "PingFangTC", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
    --text-btn--primary: #3c2077;
    --color-main: #879ffd;
    /* --bg-game-card: linear-gradient(30deg, #879ffd 0%, #435084 100%); */
    /*遊戲對話背景*/
    --bg-game-chat: linear-gradient(to bottom, rgba(18, 21, 36, 0.8) 10%, rgba(39, 47, 79, 0.7)),
        linear-gradient(to bottom, rgba(89, 107, 177, 0) 0%, rgba(89, 107, 177, 0.8) 15%, rgba(89, 107, 177, 0.5) 100%);
    --height-header: 80px;

    /*  */
    /* 主要背景色系 */
    --bg-primary: rgb(37, 39, 52);
    /*rgb(23, 28, 48)*/
    --bg-secondary: rgba(51, 65, 119, 0.5);
    --bg-tertiary: rgba(50, 61, 107, 0.6);
    --bg-fade: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    --bg-gradient: linear-gradient(to bottom, #262836, #171821, #262836 70%, #2f3960 100%);
    /* 漸層背景 */
    --gradient-primary: linear-gradient(to bottom, rgba(89, 107, 177, 0.08), rgba(89, 107, 177, 0.03));
    --gradient-secondary: linear-gradient(135deg, rgba(89, 107, 177, 0.346), rgba(44, 57, 107, 0.675));
    /* 邊框顏色 */
    --border-primary: rgba(105, 126, 207, 0.3);
    --border-secondary: rgba(129, 150, 234, 0.7);
    --border-light: rgba(255, 255, 255, 0.1);
    /* 文字顏色 */
    --text-primary: #fff;
    --text-secondary: rgba(227, 238, 245, 0.8);
    --text-tertiary: rgba(224, 235, 243, 0.5);
    --text-highlight: #c0bdff;
    --text-highlight-colorful: #ae84ff;
    --text-btn--primary: #3c2077;
    --text-btn-hover--primary: #543695;
    --text-primary-dark: #3d2f5b;
    /* 特效顏色 */
    --glow-primary: rgba(255, 255, 255, 0.5);
    --glow-secondary: rgba(143, 166, 255, 0.4);
    --glow-accent: rgba(109, 127, 199, 0.8);
    /* 功能性顏色 */
    --switch-active: #88a0ff;
    --error: rgb(255, 100, 100);
    /* 新增一些共用的顏色變數 */
    --blur-overlay: rgba(0, 0, 0, 0.2);
    --white-gradient: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
    --scrollbar-color: #8899f0;
    /*寬度*/
    --width-small: clamp(480px, 50%, 720px);
    /*post卡片*/
    --bg-game-card: linear-gradient(30deg, #879ffd 0%, #435084 100%);

    --shadow-cover-post: rgba(18, 12, 33, 0.6) 0px 0px 8px;
    --shadow-shine: 0 0 20px rgba(109, 127, 199, 0.8), inset 0 0 30px rgba(105, 126, 207, 0.05), inset 0 0 20px rgba(109, 127, 199, 0.8);
    --color-border-post: #5b607a;
    --color-bg-post: linear-gradient(to bottom, #191c2b, #35394c);

    --title-gradient: linear-gradient(to bottom, #a296ff 0%, #f1efff 50%, #a296ff 50%, #cac3ff 100%);
    --title-size: clamp(20px, 2.75vh, 36px);
}

@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Keyframes for the rotating animation */
@keyframes rotating {
    0% {
        --a: 0deg;
    }
    100% {
        --a: 360deg;
    }
}

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after {
    content: "";
    content: none;
}

q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}
.--pos-1:before {
    -webkit-mask-position: 0% 0;
}

.--pos-2:before {
    -webkit-mask-position: 1.45% 0;
}

.--pos-3:before {
    -webkit-mask-position: 2.9% 0;
}

.--pos-4:before {
    -webkit-mask-position: 4.35% 0;
}

.--pos-5:before {
    -webkit-mask-position: 5.8% 0;
}

.--pos-6:before {
    -webkit-mask-position: 7.25% 0;
}

.--pos-7:before {
    -webkit-mask-position: 8.7% 0;
}

.--pos-8:before {
    -webkit-mask-position: 10.14% 0;
}

.--pos-9:before {
    -webkit-mask-position: 11.59% 0;
}

.--pos-10:before {
    -webkit-mask-position: 13.04% 0;
}

.--pos-11:before {
    -webkit-mask-position: 14.49% 0;
}

.--pos-12:before {
    -webkit-mask-position: 15.94% 0;
}

.--pos-13:before {
    -webkit-mask-position: 17.39% 0;
}

.--pos-14:before {
    -webkit-mask-position: 18.84% 0;
}

.--pos-15:before {
    -webkit-mask-position: 20.29% 0;
}

.--pos-16:before {
    -webkit-mask-position: 21.74% 0;
}

.--pos-17:before {
    -webkit-mask-position: 23.19% 0;
}

.--pos-18:before {
    -webkit-mask-position: 24.64% 0;
}

.--pos-19:before {
    -webkit-mask-position: 26.09% 0;
}

.--pos-20:before {
    -webkit-mask-position: 27.54% 0;
}

.--pos-21:before {
    -webkit-mask-position: 28.99% 0;
}

.--pos-22:before {
    -webkit-mask-position: 30.43% 0;
}

.--pos-23:before {
    -webkit-mask-position: 31.88% 0;
}

.--pos-24:before {
    -webkit-mask-position: 33.33% 0;
}

.--pos-25:before {
    -webkit-mask-position: 34.78% 0;
}

.--pos-26:before {
    -webkit-mask-position: 36.23% 0;
}

.--pos-27:before {
    -webkit-mask-position: 37.68% 0;
}

.--pos-28:before {
    -webkit-mask-position: 39.13% 0;
}

.--pos-29:before {
    -webkit-mask-position: 40.58% 0;
}

.--pos-30:before {
    -webkit-mask-position: 42.03% 0;
}

.--pos-31:before {
    -webkit-mask-position: 43.48% 0;
}

.--pos-32:before {
    -webkit-mask-position: 44.93% 0;
}

.--pos-33:before {
    -webkit-mask-position: 46.38% 0;
}

.--pos-34:before {
    -webkit-mask-position: 47.83% 0;
}

.--pos-35:before {
    -webkit-mask-position: 49.28% 0;
}

.--pos-36:before {
    -webkit-mask-position: 50.72% 0;
}

.--pos-37:before {
    -webkit-mask-position: 52.17% 0;
}

.--pos-38:before {
    -webkit-mask-position: 53.62% 0;
}

.--pos-39:before {
    -webkit-mask-position: 55.07% 0;
}

.--pos-40:before {
    -webkit-mask-position: 56.52% 0;
}

.--pos-41:before {
    -webkit-mask-position: 57.97% 0;
}

.--pos-42:before {
    -webkit-mask-position: 59.42% 0;
}

.--pos-43:before {
    -webkit-mask-position: 60.87% 0;
}

.--pos-44:before {
    -webkit-mask-position: 62.32% 0;
}

.--pos-45:before {
    -webkit-mask-position: 63.77% 0;
}

.--pos-46:before {
    -webkit-mask-position: 65.22% 0;
}

.--pos-47:before {
    -webkit-mask-position: 66.67% 0;
}

.--pos-48:before {
    -webkit-mask-position: 68.12% 0;
}

.--pos-49:before {
    -webkit-mask-position: 69.57% 0;
}

.--pos-50:before {
    -webkit-mask-position: 71.01% 0;
}

.--pos-51:before {
    -webkit-mask-position: 72.46% 0;
}

.--pos-52:before {
    -webkit-mask-position: 73.91% 0;
}

.--pos-53:before {
    -webkit-mask-position: 75.36% 0;
}

.--pos-54:before {
    -webkit-mask-position: 76.81% 0;
}

.--pos-55:before {
    -webkit-mask-position: 78.26% 0;
}

.--pos-56:before {
    -webkit-mask-position: 79.71% 0;
}

.--pos-57:before {
    -webkit-mask-position: 81.16% 0;
}

.--pos-58:before {
    -webkit-mask-position: 82.61% 0;
}

.--pos-59:before {
    -webkit-mask-position: 84.06% 0;
}

.--pos-60:before {
    -webkit-mask-position: 85.51% 0;
}

.--pos-61:before {
    -webkit-mask-position: 86.96% 0;
}

.--pos-62:before {
    -webkit-mask-position: 88.41% 0;
}

.--pos-63:before {
    -webkit-mask-position: 89.86% 0;
}

.--pos-64:before {
    -webkit-mask-position: 91.3% 0;
}

.--pos-65:before {
    -webkit-mask-position: 92.75% 0;
}

.--pos-66:before {
    -webkit-mask-position: 94.2% 0;
}

.--pos-67:before {
    -webkit-mask-position: 95.65% 0;
}

.--pos-68:before {
    -webkit-mask-position: 97.1% 0;
}

.--pos-69:before {
    -webkit-mask-position: 98.55% 0;
}

.--pos-70:before {
    -webkit-mask-position: 100% 0;
}

.imrs-icon {
    font-size: 0;
    display: block;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-property: transform;
}

.imrs-icon:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    -webkit-mask-image: url("../images/imrs-iconset.svg");
    -webkit-mask-size: auto 100%;
    -webkit-mask-repeat: no-repeat;
    background-color: var(--color-pair);
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-property: background-color;
    width: 26px;
    height: 26px;
}

.imrs-icon.--small:before {
    width: 18px;
    height: 18px;
}

html,
body {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    padding: 0;
    margin: 0;
    line-height: 1.375;
    color: #000;
    font-size: 1em;
    background-color: var(--color-bg-main);
    font-family: var(--font-default);
    color: var(--color-read);
}

html {
    /* 為 Webkit 瀏覽器（如 Chrome 和 Safari）設定滾動條樣式 */
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) transparent;
    /* 滾動條顏色 背景顏色 */
}

html::-webkit-scrollbar {
    width: 12px;
    /* 滾動條寬度 */
}

html::-webkit-scrollbar-track {
    background: transparent;
    /* 滾動條背景顏色 */
}

html::-webkit-scrollbar-thumb {
    background-color: var(--color-scrollbar);
    /* 滾動條顏色 */
    border-radius: 20px;
    /* 滾動條圓角 */
    transition: background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}