* { box-sizing:border-box; }
html {
min-height:100%;
overflow-x:hidden;
scrollbar-gutter:stable;
scrollbar-width:thin;
scrollbar-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.24)) color-mix(in srgb,var(--bg) 88%,#000 12%);
}
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:color-mix(in srgb,var(--bg) 88%,#000 12%); }
::-webkit-scrollbar-thumb {
border:2px solid color-mix(in srgb,var(--bg) 88%,#000 12%);
border-radius:999px;
background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.22)),color-mix(in srgb,var(--accent2) 42%,rgba(255,255,255,.18)));
}
::-webkit-scrollbar-thumb:hover {
background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 70%,rgba(255,255,255,.25)),color-mix(in srgb,var(--accent2) 52%,rgba(255,255,255,.22)));
}
body { margin:0; font-family:Inter,Arial,sans-serif; background:
radial-gradient(circle at 10% 0%, var(--accent-a14), transparent 24%),
radial-gradient(circle at 100% 10%, var(--accent2-a18), transparent 28%),
linear-gradient(90deg, var(--page-grid) 1px, transparent 1px),
linear-gradient(var(--page-grid) 1px, transparent 1px),
linear-gradient(180deg,var(--bg),var(--bg2)); color:var(--text); }
body.modal-open { overflow:hidden; }
.mobile-bottom-nav { display:none !important; }
.shell { max-width:1460px; margin:0 auto; padding:clamp(14px,2.4vw,28px) clamp(12px,2vw,18px) 60px; background-size:auto,auto,34px 34px,34px 34px,auto; }
.hero, .leaderboard-card, .topbar { position:relative; overflow:hidden; border:1px solid var(--soft-line); border-radius:24px; background:linear-gradient(180deg,var(--surface-1),var(--surface-3)); box-shadow:0 24px 60px rgba(0,0,0,.26), 0 0 36px var(--soft-glow); }
.hero::before, .leaderboard-card::before, .topbar::before { content:""; position:absolute; inset:0; background:
linear-gradient(135deg, color-mix(in srgb,var(--text) 7%,transparent), transparent 28%, transparent 72%, var(--accent-a10));
pointer-events:none; }
.topbar { padding:12px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; backdrop-filter:blur(14px); }
.brand { min-width:0; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav { min-width:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.nav-item { max-width:100%; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:12px; border:1px solid var(--soft-line); background:var(--surface-2); color:var(--text); font-size:.875rem; font-weight:800; text-decoration:none; white-space:nowrap; cursor:pointer; transition:border-color .18s, background .18s, transform .18s; }
.nav-profile span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.nav-item:hover { transform:translateY(-1px); border-color:var(--accent-a28); background:var(--surface-hover); }
.nav-item.active { border-color:var(--accent); background:var(--accent-a14); color:var(--text); box-shadow:0 0 0 1px var(--accent-a22), 0 0 22px var(--accent-a28), inset 0 1px 0 rgba(255,255,255,.12); }
.nav-login { border-color:var(--accent-a35); background:var(--accent-a12); box-shadow:0 0 20px var(--accent-a10); }
.nav-login:hover { background:var(--accent-a22); }
.nav-logout { color:var(--muted); }
.nav-avatar { width:24px; height:24px; border-radius:999px; background:var(--accent-a14); display:grid; place-items:center; color:var(--accent); font-weight:1000; font-size:.75rem; overflow:hidden; flex-shrink:0; }
.nav-avatar img { width:100%; height:100%; object-fit:cover; }
.nav-contact-btn { position:relative; }
.hero { padding:clamp(18px,2.4vw,28px); margin-bottom:18px; min-height:330px; display:grid; grid-template-columns:minmax(0, .9fr) minmax(320px, 1.1fr); gap:24px; align-items:stretch; }
.hero::after { content:""; position:absolute; right:-40px; top:-30px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, var(--accent-a22), transparent 60%); filter:blur(10px); }
.hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.eyebrow { display:inline-flex; width:max-content; padding:8px 12px; border-radius:999px; background:var(--accent-a12); color:var(--accent); font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:14px 0 8px; font-size:clamp(2.05rem,5.2vw,3.4rem); line-height:.95; letter-spacing:0; max-width:980px; text-transform:uppercase; overflow-wrap:break-word; word-break:normal; }
.hero-title { position:relative; width:max-content; max-width:100%; background:linear-gradient(90deg,var(--text),var(--accent2),var(--accent),var(--text)); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px var(--accent-a22)); animation:titleGlow 5.5s ease-in-out infinite; }
.hero-title::after { content:""; position:absolute; left:0; right:0; bottom:-8px; height:3px; border-radius:999px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),transparent); transform-origin:left; animation:titleScan 2.8s ease-in-out infinite; opacity:.85; }
@keyframes titleGlow { 0%,100% { background-position:0% 50%; filter:drop-shadow(0 0 14px var(--accent-a16)); } 50% { background-position:100% 50%; filter:drop-shadow(0 0 28px var(--accent-a35)); } }
@keyframes titleScan { 0%,100% { transform:scaleX(.18) translateX(0); opacity:.38; } 50% { transform:scaleX(1) translateX(0); opacity:.95; } }
.hero-note { color:var(--muted); font-size:.96rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.shell-crystal, .shell-mascot { display:none; border:none; background:transparent; padding:0; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.station-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.station-label { color:var(--accent); font-size:.78rem; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; }
.hero-cta { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 16px; border-radius:999px; border:1px solid var(--accent-a35); background:var(--accent-a12); color:var(--text); font-weight:1000; text-decoration:none; cursor:pointer; }
.hero-cta.secondary { border-color:var(--soft-line); background:var(--surface-2); color:var(--muted); }
.hero-cta:hover { border-color:var(--accent-a42); background:var(--accent-a22); color:var(--text); }
.hero-media { position:relative; z-index:1; min-width:0; }
@media (max-width:900px) {
.topbar { align-items:flex-start; flex-direction:column; padding:12px; border-radius:18px; }
.brand { width:100%; }
.nav { width:100%; flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
.nav-item { flex:0 0 auto; height:38px; padding:0 13px; }
.nav-profile { max-width:min(230px,70vw); }
}
@media (max-width:1040px) {
.hero { grid-template-columns:1fr; min-height:unset; }
.hero-copy { justify-content:flex-start; }
.hero-media { min-height:320px; }
}
@media (max-width:520px) {
.hero, .leaderboard-card, .topbar { border-radius:18px; }
.brand { font-size:.92rem; letter-spacing:.1em; }
.eyebrow { max-width:100%; }
.hero::after { width:180px; height:180px; right:-70px; top:-56px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration:.001ms!important;
animation-iteration-count:1!important;
scroll-behavior:auto!important;
transition-duration:.001ms!important;
}
.hero-title, .hero-title::after, .global-chat, .live-dot {
animation:none!important;
}
}
.global-chat { --chat-row-height:42px; position:relative; height:auto; display:grid; grid-template-rows:auto auto auto auto; border:1.5px solid var(--accent); border-radius:22px; overflow:visible; background:color-mix(in srgb,var(--surface-1) 86%,transparent); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent), 0 0 25px var(--accent-a28), 0 18px 46px rgba(0,0,0,.35); backdrop-filter:blur(12px); animation:chat-neon-pulse 4s ease-in-out infinite alternate; }
@keyframes chat-neon-pulse {
0% { box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 15px var(--accent-a16), 0 18px 46px rgba(0,0,0,.35); border-color:var(--accent-a70) !important; }
100% { box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 30px var(--accent-a35), 0 18px 46px rgba(0,0,0,.45); border-color:var(--accent) !important; }
}
.chat-head { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--soft-line); border-radius:20px 20px 0 0; background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-1) 82%,transparent)); }
.chat-head span { display:block; color:var(--accent); font-size:.7rem; font-weight:1000; letter-spacing:.14em; text-transform:uppercase; }
.chat-head strong { display:block; color:var(--text); margin-top:3px; text-transform:uppercase; }
.live-inline { display:inline-flex!important; align-items:center; gap:6px; color:var(--text)!important; font-size:inherit!important; letter-spacing:0!important; text-transform:uppercase!important; }
.live-dot { display:inline-block!important; width:8px; height:8px; border-radius:999px; background:#ff244d; box-shadow:0 0 0 4px rgba(255,36,77,.14), 0 0 16px rgba(255,36,77,.82); animation:liveDotPulse 1.35s ease-in-out infinite; }
@keyframes liveDotPulse { 0%,100% { transform:scale(.86); opacity:.72; } 50% { transform:scale(1.12); opacity:1; } }
.chat-head-actions { display:flex; gap:7px; flex-wrap:nowrap; justify-content:flex-end; }
.chat-icon-btn,.chat-send { border:1px solid var(--soft-line); border-radius:999px; background:var(--surface-2); color:var(--text); min-height:34px; padding:0 11px; cursor:pointer; font:inherit; font-size:.76rem; font-weight:900; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.chat-icon-btn.compact { width:34px; height:34px; min-width:34px; padding:0; font-size:1rem; line-height:1; }
.chat-icon-svg { width:17px; height:17px; display:block; }
.chat-icon-btn:hover,.chat-send:hover { border-color:var(--accent-a35); background:var(--accent-a12); }
.chat-list { height:236px; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:10px 12px; display:grid; align-content:start; gap:7px; scroll-behavior:auto; }
.chat-empty { color:var(--muted); border:1px dashed var(--soft-line); border-radius:16px; padding:18px; text-align:center; background:var(--surface-2); }
.chat-message { display:grid; grid-template-columns:26px minmax(0,1fr); gap:8px; align-items:start; }
.chat-message.mine .chat-bubble { border-color:var(--accent-a28); background:var(--accent-a10); }
.chat-avatar { width:26px; height:26px; min-width:26px; min-height:26px; max-width:26px; max-height:26px; flex-shrink:0; border-radius:999px; background:var(--accent-a14); color:var(--accent); display:grid; place-items:center; font-size:.68rem; font-weight:1000; overflow:hidden; }
.chat-avatar img { width:100%; height:100%; object-fit:cover; border-radius:999px; }
.chat-bubble { min-width:0; max-width:min(92%, 390px); overflow:visible; border:1px solid var(--soft-line); border-radius:18px; padding:7px 10px; background:var(--surface-2); }
.chat-message.mine .chat-bubble { justify-self:end; }
.chat-meta { display:flex; gap:7px; align-items:baseline; justify-content:space-between; margin-bottom:2px; }
.chat-name { color:var(--text); font-weight:1000; font-size:.78rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-name-btn { min-width:0; display:inline-flex; }
.chat-name-btn .user-action-trigger { min-width:0; gap:0; }
.chat-name-btn .user-action-trigger:hover .chat-name { color:var(--accent); text-decoration:underline; }
.chat-time { color:var(--muted); font-size:.66rem; flex-shrink:0; }
.chat-text { color:var(--text); line-height:1.28; font-size:.9rem; overflow-wrap:anywhere; word-break:break-word; white-space:pre-wrap; display:block; max-width:100%; max-height:2.6em; overflow:hidden; }
.chat-bubble.has-gif,
.chat-bubble.has-yt { max-width:min(96%, 330px); padding:6px; }
.chat-bubble.has-gif .chat-text,
.chat-bubble.has-yt .chat-text,
.chat-text:has(.youtube-preview-card) { max-height:none !important; overflow:visible !important; }
.chat-compose { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:12px; border-top:1px solid var(--soft-line); background:color-mix(in srgb,var(--surface-3) 76%,transparent); align-items:center; }
.chat-compose textarea { width:100%; min-height:36px; height:36px; resize:none; border:1px solid var(--soft-line); border-radius:14px; background:var(--surface-1); color:var(--text); padding:8px 12px; font:inherit; line-height:1.35; }
.chat-compose textarea:disabled { opacity:.58; cursor:not-allowed; }
.chat-send { min-width:72px; min-height:36px; height:36px; border-color:var(--accent-a35); background:var(--accent-a12); }
.chat-tool-btn { border:1px solid var(--soft-line); border-radius:999px; background:var(--surface-2); color:var(--text); min-height:30px; padding:0 10px; cursor:pointer; font:inherit; font-size:.76rem; font-weight:1000; }
.chat-tool-btn:hover { border-color:var(--accent-a35); background:var(--accent-a12); }
.chat-tool-btn.danger { color:#ff9aae; border-color:rgba(255,93,125,.24); background:rgba(255,93,125,.08); }
.chat-count { margin-left:auto; color:var(--muted); font-size:.74rem; font-weight:900; white-space:nowrap; }
.chat-count.warn { color:#ffd66b; }
.chat-count.danger { color:#ff9aae; }
.chat-emoji-panel {
position: static;
z-index: 16000 !important;
background: color-mix(in srgb,var(--surface-1) 96%,var(--bg));
border: 1px solid var(--soft-line);
border-radius: 16px;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(14px);
padding: 12px;
display: none;
width: auto;
max-width: none;
max-height: 190px;
overflow: auto;
margin: 10px 12px 0;
box-sizing: border-box;
}
.chat-emoji-panel.active { display:block; }
#chat-emoji-panel { position:absolute; left:12px; right:12px; bottom:78px; width:auto; max-height:min(190px, calc(100vh - 180px)); margin:0; z-index:18000!important; }
.chat-emoji-panel.is-gif-tab { max-height:236px; }
#chat-emoji-panel.is-gif-tab { max-height:min(236px, calc(100vh - 180px)); }
.chat-emoji-panel,.picker-grid,.emoji-grid,.gif-grid { overscroll-behavior:contain; }
#chat-emoji-panel::after { content:""; position:absolute; right:68px; bottom:-7px; width:14px; height:14px; transform:rotate(45deg); background:color-mix(in srgb,var(--surface-1) 96%,var(--bg)); border-right:1px solid var(--soft-line); border-bottom:1px solid var(--soft-line); }
#dm-emoji-panel { margin:8px 0 0; }
.chat-emoji-panel button { min-height:32px; border:1px solid var(--soft-line); border-radius:12px; background:var(--surface-2); color:var(--text); cursor:pointer; font-weight:900; }
.chat-emoji-panel button:hover { border-color:var(--accent-a35); background:var(--accent-a12); }
.chat-emoji-panel .picker-close-btn { margin-left:auto; width:30px; min-width:30px; height:30px; min-height:30px; padding:0; border-radius:999px; font-size:1.05rem; line-height:1; color:var(--muted); }
.chat-emoji-panel .picker-close-btn:hover { color:var(--text); border-color:rgba(255,93,125,.40); background:rgba(255,93,125,.12); }
.chat-emoji-panel.is-gif-tab .gif-grid { max-height:220px!important; }
.chat-status { min-height:24px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px 10px; color:var(--muted); font-size:.78rem; }
.chat-status-live { display:inline-flex; align-items:center; gap:7px; min-width:0; }
.chat-status .live-dot { width:7px; height:7px; }
.chat-status-btn { width:24px; height:24px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(255,255,255,.04); color:var(--muted); cursor:pointer; padding:0; }
.chat-status-btn .chat-icon-svg { width:13px; height:13px; }
.chat-status-btn:hover { color:var(--text); border-color:var(--accent-a35); background:var(--accent-a12); }
.chat-status-btn.danger:hover { color:#ff9aae; border-color:rgba(255,93,125,.42); background:rgba(255,93,125,.12); }
.timeout-icon { width:22px; height:22px; display:inline-grid; place-items:center; border:1px solid rgba(255,214,107,.28); border-radius:999px; background:rgba(255,214,107,.10); color:#ffd66b; cursor:pointer; font-size:.75rem; line-height:1; box-shadow:0 0 14px rgba(255,214,107,.16); }
.timeout-icon:hover { background:rgba(255,214,107,.18); box-shadow:0 0 22px rgba(255,214,107,.28); }
/* Admin hover actions */
.chat-bubble { position: relative; }
.chat-admin-actions {
display: none !important;
position: absolute;
top: auto;
bottom: calc(100% + 8px);
right: 6px;
background: rgba(15, 20, 30, 0.98) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 12px;
padding: 6px;
gap: 4px;
z-index: 26000;
box-shadow: 0 18px 42px rgba(0,0,0,0.72), 0 0 24px var(--accent-a14);
margin-top: 0;
flex-direction: column;
min-width: 148px;
max-height: min(320px, 52vh);
overflow: auto;
}
.chat-admin-menu-btn { position:absolute; top:5px; right:6px; width:24px; height:24px; display:none; place-items:center; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(0,0,0,.26); color:var(--muted); cursor:pointer; font-weight:1000; line-height:1; }
.chat-message:hover .chat-admin-menu-btn,.chat-admin-open .chat-admin-menu-btn { display:grid; }
.chat-admin-open .chat-admin-actions { display:flex!important; }
.chat-admin-btn { width:100%; display:flex; align-items:center; gap:7px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-size:.72rem; font-weight:1000; padding:7px 8px; text-align:left; }
.chat-admin-btn:hover { color:var(--text); border-color:var(--accent-a35); background:var(--accent-a12); }
.chat-admin-btn.danger:hover { color:#ff9aae; border-color:rgba(255,93,125,.42); background:rgba(255,93,125,.12); }
.chat-sticker { display:inline-flex; align-items:center; gap:5px; margin:0 2px; padding:3px 8px; border:1px solid var(--accent-a28); border-radius:999px; background:var(--accent-a10); color:var(--text); font-weight:1000; }
.chat-gif { display:block; width:min(300px,100%); max-height:220px; object-fit:contain; border-radius:12px; margin-top:6px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.18); }
.composer-media-preview { grid-column:1 / -1; display:none; align-items:center; gap:8px; flex-wrap:wrap; min-height:0; }
.composer-media-preview.active { display:flex; }
.composer-media-chip { position:relative; display:inline-flex; align-items:center; justify-content:center; max-width:148px; max-height:92px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.05); padding:5px; overflow:hidden; }
.composer-media-chip img.chat-custom-emoji { width:34px; height:34px; margin:0; }
.composer-media-chip img.chat-gif { width:auto; max-width:138px; max-height:82px; margin:0; border:0; border-radius:9px; }
.composer-media-remove { position:absolute; top:3px; right:3px; width:20px; height:20px; display:grid; place-items:center; border:0; border-radius:999px; background:rgba(0,0,0,.62); color:#fff; cursor:pointer; font-size:.78rem; line-height:1; }
/* Reverse own message layout so avatar sits right next to the bubble on the right */
.chat-message .chat-avatar,
.chat-message .chat-avatar-placeholder,
.chat-message .chat-bubble {
grid-row: 1;
}
/* Reverse own message layout so avatar sits right next to the bubble on the right */
.chat-message.mine {
grid-template-columns: minmax(0, 1fr) 26px !important;
}
.chat-message.mine .chat-avatar,
.chat-message.mine .chat-avatar-placeholder {
grid-column: 2;
}
.chat-message.mine .chat-bubble {
grid-column: 1;
justify-self: end;
}
body .global-chat.fullscreen,
.global-chat.fullscreen {
position: fixed !important;
inset: 18px !important;
z-index: 12000 !important;
height: calc(100vh - 36px) !important;
min-height: 0 !important;
grid-template-rows: auto minmax(0, 1fr) auto auto !important;
border-radius: 24px !important;
background: linear-gradient(180deg, var(--panel), var(--bg)) !important;
box-shadow: 0 28px 90px rgba(0, 0, 0, 0.68), 0 0 60px var(--accent-a12) !important;
}
@media (max-width: 768px) {
body .global-chat.fullscreen,
.global-chat.fullscreen {
inset: 10px 10px 58px 10px !important;
height: calc(100vh - 68px) !important;
border-radius: 18px 18px 0 0 !important;
}
}
.global-chat.fullscreen .chat-list {
height: 100% !important;
min-height: 0 !important;
}
.global-chat.fullscreen .chat-text { display:block; overflow:visible; max-height:none; }
.global-chat.fullscreen .chat-gif { width:min(340px,100%); max-height:260px; }
.global-chat.fullscreen #chat-emoji-panel { bottom:78px; max-height:min(220px, 38vh); }
.global-chat.fullscreen #chat-emoji-panel.is-gif-tab { max-height:min(256px, 44vh); }
body.chat-fullscreen-open { overflow:hidden; }
/* YouTube Preview Card Styles */
.youtube-preview-card {
margin: 6px 0 2px 0;
width: 100%;
max-width: 220px;
border-radius: 4px;
border-left: 3px solid #ff0000;
padding-left: 8px;
display: block;
text-decoration: none !important;
transition: transform 0.2s ease;
}
.youtube-preview-card:hover {
transform: translateX(2px);
}
.youtube-card-link {
display: block;
text-decoration: none !important;
color: inherit !important;
}
.youtube-thumbnail-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 6px;
}
.youtube-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.2s ease;
display: block;
}
.youtube-preview-card:hover .youtube-thumbnail {
opacity: 0.85;
}
.youtube-play-btn {
position: absolute;
width: 36px;
height: 36px;
background: rgba(255, 0, 0, 0.9);
color: #fff;
border-radius: 50%;
display: grid;
place-items: center;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
transition: background 0.2s ease, transform 0.2s ease;
}
.youtube-play-btn svg {
width: 16px;
height: 16px;
margin-left: 2px;
display: block;
}
.youtube-preview-card:hover .youtube-play-btn {
background: #ff0000;
transform: scale(1.1);
}
.youtube-embed-iframe {
width: 100%;
aspect-ratio: 16 / 9;
display: block;
border: none;
border-radius: 6px;
}
.music-player { display:none; margin-top:14px; border:1px solid var(--soft-line); border-radius:18px; overflow:hidden; background:var(--surface-2); }
.music-player.active { display:block; }
.music-player iframe { display:block; width:100%; height:96px; border:0; }
.music-player .music-dock-note { padding:12px 14px; color:var(--muted); font-size:.82rem; font-weight:800; }
.persistent-music-dock { position:fixed; left:18px; bottom:18px; z-index:16000; width:min(460px, calc(100vw - 36px)); max-width:calc(100vw - 36px); max-height:calc(100vh - 36px); display:none; flex-direction:column; border:1px solid var(--accent-a28); border-radius:18px; overflow:hidden; background:linear-gradient(180deg,var(--surface-1),var(--surface-3)); box-shadow:0 22px 70px rgba(0,0,0,.46), 0 0 42px var(--accent-a12); backdrop-filter:blur(14px); transition:opacity .18s ease, transform .18s ease, width .18s ease; }
.persistent-music-dock.active { display:flex; }
.persistent-music-dock.minimized { width:214px; }
.persistent-music-dock.minimized #tera-persistent-music-body { display:none; }
.persistent-music-dock.minimized .music-dock-top { border-bottom:0; }
.music-dock-top { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--soft-line); color:var(--muted); font-size:.72rem; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; cursor:move; user-select:none; touch-action:none; }
.music-dock-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-dock-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.music-dock-btn { position:relative; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--soft-line); border-radius:10px; background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--surface-3) 82%,transparent)); color:var(--text); cursor:pointer; font:inherit; font-size:1rem; font-weight:1000; padding:0; overflow:visible; transform:skewX(-8deg); box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 9%,transparent), 0 0 18px rgba(0,0,0,.22); }
.music-dock-btn span { transform:skewX(8deg); display:block; line-height:1; filter:drop-shadow(0 0 8px var(--accent-a35)); }
.music-dock-btn::before { content:""; position:absolute; inset:2px; border-radius:8px; border:1px solid transparent; background:linear-gradient(135deg,var(--accent-a35),transparent 45%,var(--accent2-a18)) border-box; opacity:.0; pointer-events:none; }
.music-dock-btn::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%) skewX(8deg); padding:5px 8px; border:1px solid var(--accent-a28); border-radius:999px; background:var(--surface-1); color:var(--text); font-size:.64rem; font-weight:1000; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .16s ease, bottom .16s ease; box-shadow:0 12px 28px rgba(0,0,0,.34); }
.music-dock-btn:hover { color:var(--accent); border-color:var(--accent-a42); background:linear-gradient(135deg,var(--accent-a16),rgba(255,255,255,.04)); box-shadow:0 0 24px var(--accent-a16), inset 0 1px 0 rgba(255,255,255,.12); }
.music-dock-btn:hover::before { opacity:1; }
.music-dock-btn:hover::after { opacity:1; bottom:calc(100% + 12px); }
.music-dock-btn.danger:hover { color:#ff9aae; border-color:rgba(255,93,125,.42); background:linear-gradient(135deg,rgba(255,93,125,.18),rgba(255,255,255,.04)); box-shadow:0 0 24px rgba(255,93,125,.18), inset 0 1px 0 rgba(255,255,255,.12); }
#tera-persistent-music-body { min-height:0; overflow:auto; }
.tera-audio-player { position:relative; min-height:96px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:center; padding:14px; overflow:hidden; background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--accent2) 8%,transparent)); }
.tera-audio-player::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(135deg,color-mix(in srgb,var(--surface-1) 94%,var(--accent) 6%),color-mix(in srgb,var(--surface-3) 95%,var(--accent2) 5%)); pointer-events:none; }
.tera-audio-player::before { content:""; position:absolute; inset:-60% -20%; z-index:2; background:repeating-linear-gradient(90deg,var(--accent-a22) 0 2px,transparent 2px 13px); opacity:.22; animation:musicWave 1.6s linear infinite; pointer-events:none; }
.tera-audio-player.playing::before { opacity:.38; animation-duration:.7s; }
.audio-toggle { position:relative; z-index:3; width:48px; height:48px; border-radius:999px; border:1px solid var(--accent-a35); background:var(--accent-a12); color:var(--text); display:grid; place-items:center; cursor:pointer; font-weight:1000; box-shadow:0 0 28px var(--accent-a16); }
.audio-toggle:hover { background:var(--accent-a22); }
.audio-main { position:relative; z-index:3; display:grid; gap:9px; min-width:0; }
.audio-label { display:flex; justify-content:space-between; gap:10px; align-items:center; color:var(--muted); font-size:.74rem; font-weight:1000; letter-spacing:.10em; text-transform:uppercase; }
.audio-label strong { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audio-time { color:var(--accent); flex-shrink:0; }
.audio-progress { position:relative; height:12px; border-radius:999px; overflow:hidden; background:var(--surface-2); cursor:pointer; box-shadow:inset 0 0 0 1px var(--soft-line); }
.audio-progress::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 4px,transparent 4px 11px); opacity:.45; animation:musicPulse .55s linear infinite; }
.audio-fill { position:absolute; inset:0 auto 0 0; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent2),var(--gold)); box-shadow:0 0 24px var(--accent-a35); transition:width .18s linear; }
.youtube-hidden-frame { position:absolute; top:-9999px; left:-9999px; z-index:0; width:1px; height:1px; min-height:0; border:0; opacity:0; pointer-events:none; visibility:hidden; }
@keyframes musicWave { from { transform:translateX(-12%); } to { transform:translateX(12%); } }
@keyframes musicPulse { from { transform:translateX(-11px); } to { transform:translateX(0); } }
.mobile-tap-play { position:absolute; inset:0; z-index:10; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.65); backdrop-filter:blur(4px); border:0; border-radius:inherit; color:#fff; font-size:1rem; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; gap:8px; transition:background .18s ease; }
.mobile-tap-play:hover, .mobile-tap-play:active { background:rgba(0,0,0,0.5); }
.tera-ajax-stage { position:fixed; inset:0; z-index:9000; display:none; background:var(--bg); }
.tera-ajax-stage.active { display:block; }
.tera-ajax-frame { width:100%; height:100%; border:0; display:block; background:var(--bg); }
body.tera-ajax-active { overflow:hidden; }
body.tera-ajax-active .persistent-music-dock { bottom:20px; }
.sub { color:var(--muted); line-height:1.7; max-width:860px; }
.leaderboard-card { padding:20px; }
.board-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; align-items:flex-start; }
.board-copy { min-width:0; }
.board-kicker { color:var(--gold); font-size:12px; font-weight:1000; letter-spacing:.16em; text-transform:uppercase; }
.board-title { font-size:1.45rem; font-weight:1000; margin-top:6px; line-height:1.02; text-transform:uppercase; }
.board-meta { color:var(--muted); margin-top:6px; }
.board-link-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(255,255,255,.04); color:var(--text); padding:10px 14px; font-size:.76rem; font-weight:1000; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; transition:.18s ease; }
.board-link-btn:hover { border-color:var(--accent-a42); background:var(--accent-a12); color:var(--accent); }
.event-panel { display:none; border:1px solid var(--line); border-radius:24px; background:linear-gradient(180deg,var(--panel),var(--bg2)); padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.26); }
.event-panel.active { display:block; }
.event-mode-tabs,.mode-tabs,.solo-dungeon-tabs { display:flex; gap:10px; flex-wrap:wrap; }
.mode-btn { border:1px solid rgba(255,255,255,.08); border-radius:999px; background:rgba(255,255,255,.04); color:var(--muted); padding:10px 14px; cursor:pointer; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.mode-btn.active,.class-btn.active { color:var(--text); border-color:var(--accent-a42); background:var(--accent-a12); box-shadow:0 0 0 1px var(--accent-a16), 0 0 24px var(--accent-a12); }
.mode-btn:disabled,.class-btn:disabled { opacity:.35; cursor:not-allowed; }
.event-mode,.solo-dungeon-panel,.class-panel { display:none; }
.event-mode.active,.solo-dungeon-panel.active,.class-panel.active { display:block; }
.solo-dungeon-tabs { margin-bottom:14px; }
.class-rail-wrap { position:relative; display:flex; align-items:center; gap:10px; margin:0 0 16px; }
.class-toolbar { display:flex; gap:8px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding:2px 0 8px; flex:1; }
.class-toolbar::-webkit-scrollbar { display:none; }
.class-btn { flex:0 0 124px; min-height:40px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.04); color:var(--muted); padding:10px 8px; cursor:pointer; font-weight:900; text-transform:uppercase; letter-spacing:.04em; text-align:center; font-size:.8rem; transition:.18s ease; }
.class-nav-btn { flex:0 0 36px; width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background:rgba(0,0,0,.38); color:var(--text); cursor:pointer; font-size:1.15rem; font-weight:1000; display:grid; place-items:center; transition:.18s ease; }
.class-nav-btn:hover { border-color:var(--accent-a42); background:var(--accent-a12); color:var(--accent); }
.group-card { border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:16px; background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
margin-bottom:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 30px rgba(0,0,0,.14); cursor:pointer; transition:transform .18s ease, border-color .18s ease; }
.group-card:last-child { margin-bottom:0; }
.lb-scroll { max-height:560px; overflow-y:auto; overscroll-behavior-y:contain; padding:4px 2px; border-radius:22px 22px 0 0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.12) transparent; }
.lb-scroll::-webkit-scrollbar { width:6px; }
.lb-scroll::-webkit-scrollbar-track { background:transparent; }
.lb-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:999px; }
.group-card:hover,.entry-row:hover td { border-color:rgba(103,217,255,.45); }
.group-card:hover { transform:translateY(-2px); }
.group-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:14px; }
.group-rank { font-size:1.75rem; font-weight:1000; color:var(--accent); min-width:64px; text-shadow:0 0 24px rgba(103,217,255,.25); }
.group-time { display:inline-flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; font-size:0.92rem; font-weight:1000; }
.time-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; font-size:0.86rem; font-weight:1000; letter-spacing:0.04em; background:linear-gradient(135deg, rgba(91, 199, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%); border:1px solid rgba(91, 199, 255, 0.45); color:#e0f2fe; box-shadow:0 2px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2); text-shadow:0 0 10px rgba(91, 199, 255, 0.35); transition:all 0.2s ease; }
.time-badge::before { content:"⏱"; font-size:0.8rem; opacity:0.9; }
.dps-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; font-size:0.86rem; font-weight:1000; letter-spacing:0.04em; background:linear-gradient(135deg, rgba(255, 122, 200, 0.22) 0%, rgba(255, 170, 96, 0.18) 100%); border:1px solid rgba(255, 122, 200, 0.55); color:#ffdaf0; box-shadow:0 0 14px rgba(255, 122, 200, 0.35), inset 0 1px 0 rgba(255,255,255,0.2); text-shadow:0 0 10px rgba(255, 122, 200, 0.4); transition:all 0.2s ease; }
.dps-badge::before { content:"⚡"; font-size:0.8rem; opacity:0.95; }
.dps-badge {pointer-events: none;}
.group-region { color:var(--muted); text-align:right; font-weight:800; }
.member-stack { display:grid; gap:8px; }
.member-row { display:grid; grid-template-columns:120px 1fr 1fr; gap:10px; align-items:center; border:1px solid rgba(255,255,255,.05); border-radius:14px; padding:11px 12px; background:rgba(255,255,255,.02); }
.member-row span, .member-row em { color:var(--muted); font-style:normal; }
.rank-1 { border-color:rgba(255,214,107,.95)!important; background:linear-gradient(135deg, rgba(255,214,107,.24), rgba(255,255,255,.045))!important; box-shadow:0 0 0 2px rgba(255,214,107,.42), 0 0 44px rgba(255,214,107,.42), 0 18px 60px rgba(255,214,107,.18)!important; }
.rank-2 { border-color:rgba(185,231,255,.9)!important; background:linear-gradient(135deg, rgba(185,231,255,.20), rgba(255,255,255,.04))!important; box-shadow:0 0 0 2px rgba(185,231,255,.32), 0 0 38px rgba(185,231,255,.34), 0 18px 52px rgba(103,217,255,.14)!important; }
.rank-3 { border-color:rgba(255,170,96,.88)!important; background:linear-gradient(135deg, rgba(255,170,96,.20), rgba(255,255,255,.04))!important; box-shadow:0 0 0 2px rgba(255,170,96,.28), 0 0 34px rgba(255,170,96,.30), 0 18px 48px rgba(255,170,96,.12)!important; }
tr.rank-1 td { background:rgba(255,214,107,.18)!important; border-top:1px solid rgba(255,214,107,.70); border-bottom:1px solid rgba(255,214,107,.70); box-shadow:0 0 24px rgba(255,214,107,.28); }
tr.rank-2 td { background:rgba(185,231,255,.16)!important; border-top:1px solid rgba(185,231,255,.62); border-bottom:1px solid rgba(185,231,255,.62); box-shadow:0 0 22px rgba(103,217,255,.24); }
tr.rank-3 td { background:rgba(255,170,96,.16)!important; border-top:1px solid rgba(255,170,96,.58); border-bottom:1px solid rgba(255,170,96,.58); box-shadow:0 0 20px rgba(255,170,96,.22); }
tr.rank-1 td:first-child,tr.rank-2 td:first-child,tr.rank-3 td:first-child { border-left:1px solid currentColor; }
tr.rank-1 td:last-child,tr.rank-2 td:last-child,tr.rank-3 td:last-child { border-right:1px solid currentColor; }
.rank-1 .group-rank,.rank-1 .player-name,.rank-1 .account-name,.rank-1 .member-row strong { color:#ffe58f!important; text-shadow:0 0 12px rgba(255,214,107,.95), 0 0 30px rgba(255,214,107,.60); }
.rank-2 .group-rank,.rank-2 .player-name,.rank-2 .account-name,.rank-2 .member-row strong { color:#d8f3ff!important; text-shadow:0 0 12px rgba(185,231,255,.85), 0 0 28px rgba(103,217,255,.50); }
.rank-3 .group-rank,.rank-3 .player-name,.rank-3 .account-name,.rank-3 .member-row strong { color:#ffc17e!important; text-shadow:0 0 12px rgba(255,170,96,.82), 0 0 26px rgba(255,170,96,.44); }
.light-theme .rank-1 .group-rank,.light-theme .rank-1 .player-name,.light-theme .rank-1 .account-name,.light-theme .rank-1 .member-row strong { color:#a37f1c!important; text-shadow:none; }
.light-theme .rank-2 .group-rank,.light-theme .rank-2 .player-name,.light-theme .rank-2 .account-name,.light-theme .rank-2 .member-row strong { color:#1e5879!important; text-shadow:none; }
.light-theme .rank-3 .group-rank,.light-theme .rank-3 .player-name,.light-theme .rank-3 .account-name,.light-theme .rank-3 .member-row strong { color:#b05200!important; text-shadow:none; }
.section-title { margin:30px 0 14px; font-size:1rem; font-weight:1000; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.current-leaderboards-section { position:relative; margin:40px 0 32px; padding:32px 36px; border-radius:24px; background:rgba(10,14,25,0.85); border:1px solid rgba(255,80,0,0.3); box-shadow:0 20px 60px rgba(0,0,0,0.85), 0 0 50px rgba(255,80,0,0.2); overflow:visible!important; }
.current-leaderboards-frame-overlay { position:absolute; inset:-16px -20px; background-image:url("/assets/tera-theme/tera-rising-obsidian-lava-frame.png")!important; background-size:100% 100%!important; background-repeat:no-repeat!important; pointer-events:none!important; z-index:25!important; filter:drop-shadow(0 15px 35px rgba(0,0,0,0.95))!important; opacity:1!important; display:block!important; }
.current-leaderboards-section > * { position:relative; z-index:5; }
.leaderboard-section-header.current-leaderboards-header.tera-rising-banner { margin:0 0 18px; padding:28px 36px; border-radius:24px; border:1px solid rgba(217,183,106,0.45); background:linear-gradient(135deg, rgba(20,32,58,0.94), rgba(8,14,30,0.98)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 20px 60px rgba(0,0,0,0.75), 0 0 36px rgba(91,199,255,0.15), inset 0 1px 0 rgba(255,235,170,0.2); position:relative; overflow:visible!important; transition:border-color 0.25s ease, box-shadow 0.25s ease; }
.leaderboard-section-header.current-leaderboards-header.tera-rising-banner:hover { border-color:rgba(217,183,106,0.85); box-shadow:0 24px 70px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.3), 0 0 55px rgba(217,183,106,0.3); }
.current-leaderboards-header .header-character-sitting { position:absolute; top:-110px; right:20px; width:280px; height:360px; background-image:url("/assets/tera-theme/tera-character-admin-commander.png"); background-size:contain; background-repeat:no-repeat; background-position:bottom right; pointer-events:none; z-index:10; filter:drop-shadow(0 15px 30px rgba(0,0,0,0.85)); transition:transform 0.3s ease; }
.leaderboard-section-header.current-leaderboards-header.tera-rising-banner:hover .header-character-sitting { transform:scale(1.03) translateY(-4px); }
@media(max-width:860px){ .current-leaderboards-header .header-character-sitting { display:none; } }
.tera-banner-aura { position:absolute; top:-50%; right:-10%; width:60%; height:200%; background:radial-gradient(circle, var(--accent-a22) 0%, transparent 70%); filter:blur(45px); pointer-events:none; z-index:0; }
.tera-badge-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; position:relative; z-index:1; }
.section-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; font-size:0.78rem; font-weight:1000; letter-spacing:0.08em; text-transform:uppercase; }
.tera-live-badge { background:linear-gradient(135deg, rgba(255,75,110,0.22), rgba(255,0,60,0.12)); border:1px solid rgba(255,75,110,0.5); color:#ff6b8b; box-shadow:0 0 16px rgba(255,75,110,0.3); }
.live-pulse-dot { width:8px; height:8px; border-radius:50%; background:#ff3b60; box-shadow:0 0 10px #ff3b60; animation:livePulseDot 1.4s ease-in-out infinite alternate; flex-shrink:0; }
@keyframes livePulseDot { from { opacity:0.4; transform:scale(0.8); } to { opacity:1; transform:scale(1.25); } }
.tera-event-badge { background:linear-gradient(135deg, rgba(217,183,106,0.22), rgba(139,96,40,0.12)); border:1px solid rgba(217,183,106,0.5); color:#ffe28a; box-shadow:0 0 16px rgba(217,183,106,0.25); }
.tera-section-title { font-family:Cinzel, Georgia, "Times New Roman", serif, var(--theme-font-display); font-size:clamp(1.8rem, 4vw, 2.6rem); font-weight:1000; letter-spacing:0.06em; text-transform:uppercase; margin:10px 0 16px; line-height:1.1; background:linear-gradient(180deg, #ffffff 0%, #ffe28a 45%, #d9b76a 75%, #8b6028 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 2px 18px rgba(217,183,106,0.4), 0 0 30px rgba(91,199,255,0.2); position:relative; z-index:1; }
.tera-actions-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; position:relative; z-index:2; }
.current-leaderboards-header .event-mode-tabs { display:flex; gap:10px; }
.current-leaderboards-header .mode-btn, .current-leaderboards-header .event-compare-link { display:inline-flex; align-items:center; justify-content:center; padding:12px 28px; font-size:0.88rem; font-weight:1000; letter-spacing:0.1em; text-transform:uppercase; border-radius:999px; border:1px solid rgba(217,183,106,0.35); background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); color:var(--text); box-shadow:0 4px 15px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.15); transition:all 0.22s cubic-bezier(0.175,0.885,0.32,1.275); cursor:pointer; text-decoration:none; }
.current-leaderboards-header .mode-btn:hover, .current-leaderboards-header .event-compare-link:hover { border-color:rgba(217,183,106,0.85); background:linear-gradient(180deg, rgba(217,183,106,0.25) 0%, rgba(217,183,106,0.1) 100%); color:#ffffff; transform:translateY(-2px); box-shadow:0 8px 25px rgba(0,0,0,0.4), 0 0 25px rgba(217,183,106,0.3); }
.current-leaderboards-header .mode-btn.active, .current-leaderboards-header .event-compare-link.active { border-color:rgba(217,183,106,0.85); background:linear-gradient(135deg, rgba(217,183,106,0.38), rgba(12,22,42,0.95)); color:#ffe28a; box-shadow:0 0 30px rgba(217,183,106,0.35), inset 0 1px 0 rgba(255,235,170,0.3); text-shadow:0 0 12px rgba(255,235,170,0.8); }
.tera-title-line { width:100%; height:2px; background:linear-gradient(90deg, rgba(217,183,106,0.6), rgba(255,255,255,0.05) 70%, transparent); border-radius:999px; margin-top:20px; }
.leaderboard-section-header.past-leaderboards-header.tera-rising-banner { margin:24px 0 8px; padding:26px 36px; border-radius:24px; border:1px solid rgba(255,255,255,0.12); background:linear-gradient(135deg, rgba(15,20,35,0.78), rgba(10,14,25,0.85)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 12px 35px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1); position:relative; overflow:hidden; transition:border-color 0.25s ease, box-shadow 0.25s ease; }
.leaderboard-section-header.past-leaderboards-header.tera-rising-banner:hover { border-color:rgba(255,255,255,0.22); box-shadow:0 16px 45px rgba(0,0,0,0.45); }
.past-leaderboards-header .archive-aura { position:absolute; top:-50%; right:-10%; width:60%; height:200%; background:radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%); filter:blur(45px); pointer-events:none; z-index:0; }
.tera-archive-badge { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:var(--muted); }
.tera-section-title.archive-title { font-size:2.2rem; font-weight:1000; letter-spacing:0.06em; text-transform:uppercase; margin:8px 0 0; line-height:1.1; background:linear-gradient(135deg, #ffffff 40%, var(--muted) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:none; position:relative; z-index:1; }
.leaderboard-card { position:relative; overflow:hidden; border-radius:22px; min-height:460px; display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(14,23,42,0.92) 0%, rgba(10,16,30,0.96) 100%); border:1px solid var(--line); }
.leaderboard-card.tera-lava-framed-card { position:relative; overflow:visible!important; border-radius:26px; background:rgba(8,12,22,0.92); border:1px solid rgba(255,100,0,0.35); padding:115px 155px 75px 155px; margin:24px 0; box-shadow:0 20px 60px rgba(0,0,0,0.9), 0 0 50px rgba(255,100,0,0.2); min-height:540px; height:540px; box-sizing:border-box; }
.leaderboard-card.tera-lava-framed-card .tera-lava-card-frame { position:absolute; top:-28px; bottom:-28px; left:-36px; right:-36px; width:calc(100% + 72px); height:calc(100% + 56px); pointer-events:none!important; z-index:20!important; object-fit:fill!important; filter:drop-shadow(0 15px 35px rgba(0,0,0,0.95)); }
.leaderboard-card.tera-lava-framed-card > * { position:relative; z-index:25; }
.leaderboard-card.tera-lava-framed-card .lb-scroll { min-height:350px; height:350px; max-height:350px; flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; }
.leaderboard-card.tera-lava-framed-card .table-wrap { min-height:350px; height:350px; max-height:350px; overflow-y:auto; }
.leaderboard-card.tera-lava-framed-card table { min-width:100%!important; width:100%; }
.leaderboard-card.tera-lava-framed-card th, .leaderboard-card.tera-lava-framed-card td { padding:8px 10px; font-size:0.82rem; }
.leaderboard-card.tera-lava-framed-card .empty-box { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:280px; box-sizing:border-box; margin:0; border:1px dashed rgba(255,255,255,0.14); border-radius:18px; background:rgba(0,0,0,0.28); text-align:center; }
@media(max-width:1024px){ .leaderboard-card.tera-lava-framed-card { padding:16px; overflow:hidden!important; height:auto!important; min-height:auto!important; } .leaderboard-card.tera-lava-framed-card .tera-lava-card-frame { display:none!important; } .leaderboard-card.tera-lava-framed-card .lb-scroll, .leaderboard-card.tera-lava-framed-card .table-wrap { height:auto!important; max-height:480px!important; min-height:280px!important; } }
@media(max-width:768px){ .leaderboard-card { min-height:auto!important; } .lb-scroll, .table-wrap { max-height:350px!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch!important; } }
.board-card-overlay { position:absolute; inset:0; pointer-events:none; background-size:cover!important; background-position:center top!important; background-repeat:no-repeat!important; opacity:0.35; z-index:0; transition:opacity 0.3s ease; }
.board-head, .lb-scroll { position:relative; z-index:1; }
.lb-scroll { display:flex; flex-direction:column; flex:1 1 auto; min-height:420px; }
.table-wrap { overflow-y:auto; overflow-x:auto; max-height:580px; scrollbar-width:thin; scrollbar-color:var(--accent-a42) rgba(10,16,30,0.5); }
.table-wrap::-webkit-scrollbar { width:6px; height:6px; }
.table-wrap::-webkit-scrollbar-track { background:rgba(10,16,30,0.5); border-radius:4px; }
.table-wrap::-webkit-scrollbar-thumb { background:var(--accent-a42); border-radius:4px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background:var(--accent); }
.carousel { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(290px, 340px); gap:14px; overflow:auto; padding:4px 18px 10px; margin-bottom:18px; scroll-snap-type:x proximity; }
.event-carousel-nav { display:none; }
.carousel-item { position:relative; scroll-snap-align:start; min-width:260px; text-align:left; border:2px solid var(--line); border-radius:22px; background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
color:var(--text); padding:0; transition:.2s ease; overflow:hidden; }
.carousel-item-overlay { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0.32; pointer-events:none; z-index:0; transition:opacity 0.25s ease, filter 0.25s ease; filter:brightness(0.85); }
.carousel-item:hover .carousel-item-overlay, .carousel-item.active .carousel-item-overlay { opacity:0.52; filter:brightness(1.05); }
.carousel-pick { position:relative; z-index:1; width:100%; min-height:100%; border:0; background:transparent; color:inherit; padding:16px; cursor:pointer; text-align:left; font:inherit; }
.carousel-year { display:block; color:var(--muted); font-size:.82rem; margin-bottom:6px; }
.carousel-item strong { display:block; font-size:1rem; line-height:1.25; text-transform:uppercase; }
.carousel-actions { position:relative; z-index:1; display:none; gap:10px; padding:0 16px 16px; box-sizing:border-box; }
.carousel-item.active .carousel-actions { display:grid; width:100%; gap:8px; }
.carousel-item.active .event-mode-tabs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.carousel-item.active .mode-btn,
.carousel-item.active .board-link-btn { width:100%; min-height:38px; justify-content:center; padding:9px 12px; white-space:nowrap; }
.carousel-compare-actions { display:grid; }
.event-compare-link { display:none; }
.event-compare-link.active { display:inline-flex; }
.carousel-item.active .event-compare-link.active { display:flex; }
.carousel-item:hover { transform:translateY(-2px); border-color:var(--accent-a22); }
.carousel-item.active { display:flex; flex-direction:column; min-height:214px; overflow:visible; border-color:var(--accent); background:linear-gradient(180deg, var(--accent-a12), rgba(255,255,255,.04)); box-shadow:0 12px 30px rgba(0,0,0,.22); }
.carousel-item.active .carousel-pick { min-height:0; flex:1 1 auto; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:separate; border-spacing:0 8px; min-width:760px; }
th,td { text-align:left; padding:13px 10px; border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top; }
td { background:rgba(255,255,255,.025); }
.entry-row { cursor:pointer; }
tbody tr td:first-child { border-radius:12px 0 0 12px; font-weight:1000; color:var(--accent); }
tbody tr td:last-child { border-radius:0 12px 12px 0; }
th { color:var(--muted); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.empty-box { padding:24px; color:var(--muted); border:1px dashed rgba(255,255,255,.12); border-radius:22px; background:rgba(255,255,255,.02); }
/* Solo DPS Role Notice Card (Sleek Dark + Red Accent, Compact Mobile) */
.solo-dps-notice { margin:16px 0 20px 0; padding:16px 20px; border-radius:16px; background:linear-gradient(135deg, rgba(12, 18, 30, 0.94) 0%, rgba(6, 10, 18, 0.97) 100%); border:1px solid rgba(255, 59, 96, 0.25); border-left:4px solid #ff2a55; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 42, 85, 0.15); display:flex; flex-direction:column; gap:10px; position:relative; z-index:10; }
.solo-dps-notice .notice-title { font-size:0.9rem; font-weight:800; letter-spacing:0.02em; color:#f1f5f9; display:flex; align-items:center; gap:8px; line-height:1.35; text-shadow:0 2px 8px rgba(0, 0, 0, 0.6); }
.solo-dps-notice .notice-title strong { color:#ff3b60; text-transform:uppercase; letter-spacing:0.08em; background:linear-gradient(135deg, #ffffff 0%, #ff5277 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.solo-dps-notice .notice-tags { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.solo-dps-notice .notice-tag { display:inline-flex; align-items:center; justify-content:center; gap:4px; padding:6px 14px; border-radius:999px; font-size:0.76rem; font-weight:900; letter-spacing:0.04em; text-transform:uppercase; background:rgba(255, 59, 96, 0.08); border:1px solid rgba(255, 59, 96, 0.28); color:#ffe4e8; box-shadow:0 3px 10px rgba(0, 0, 0, 0.3); transition:all 0.2s ease; white-space:nowrap; }
.solo-dps-notice .notice-tag:hover { border-color:#ff3b60; background:rgba(255, 59, 96, 0.25); color:#ffffff; transform:translateY(-1px); box-shadow:0 4px 14px rgba(255, 59, 96, 0.35); }
@media (max-width:768px){ .solo-dps-notice { padding:8px 12px; margin:8px 0 12px 0; gap:6px; border-radius:12px; border-left-width:3px; } .solo-dps-notice .notice-title { font-size:0.74rem; line-height:1.25; gap:4px; } .solo-dps-notice .notice-tags { gap:4px; } .solo-dps-notice .notice-tag { padding:3px 8px; font-size:0.65rem; border-radius:6px; } }
.run-focus {
position: fixed;
inset: 0;
z-index: 32000;
pointer-events: none;
}
.run-focus.active {
pointer-events: auto;
}
.focus-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 12, .72);
opacity: 0;
transition: opacity .22s ease;
backdrop-filter: blur(8px);
}
.run-focus.active .focus-backdrop {
opacity: 1;
}
.focus-panel {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: min(560px, 100%);
height: 100%;
overflow: auto;
padding: 22px;
background:
linear-gradient(180deg, var(--panel), var(--bg));
border-left: 1px solid var(--accent-a22);
box-shadow: -24px 0 80px rgba(0, 0, 0, .48), 0 0 46px var(--accent-a12);
transform: translateX(105%);
transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.run-focus.active .focus-panel {
transform: translateX(0);
}
.focus-close {
position: absolute;
z-index: 2;
top: 16px;
right: 16px;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .05);
color: var(--text);
cursor: pointer;
font-weight: 1000;
}
.focus-kicker {
color: var(--accent);
font-size: 12px;
font-weight: 1000;
letter-spacing: .16em;
text-transform: uppercase;
}
.focus-title {
margin: 8px 44px 8px 0;
font-size: 2rem;
line-height: 1;
font-weight: 1000;
text-transform: uppercase;
}
.focus-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 16px 0;
}
.focus-stat,
.focus-player,
.comment-card {
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .04);
padding: 12px;
}
.focus-stat span,
.comment-card span {
display: block;
color: var(--muted);
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;
}
.focus-stat strong {
display: block;
margin-top: 6px;
font-size: 1.05rem;
}
.focus-players {
display: grid;
gap: 10px;
margin: 14px 0;
}
.focus-player {
display: grid;
grid-template-columns: 92px 1fr;
gap: 10px;
align-items: center;
text-align: left;
color: var(--text);
cursor: pointer;
text-decoration: none;
}
.focus-player strong {
display: block;
color: var(--text);
}
.focus-player em {
display: block;
color: var(--muted);
font-style: normal;
margin-top: 3px;
}
.social-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
margin: 16px 0;
}
.social-row,
.comment-box,
.comment-actions,
.reply-compose,
.reply-compose-actions {
position: relative;
z-index: 2;
}
.like-btn,
.comment-btn,
.profile-btn {
position: relative;
z-index: 3;
touch-action: manipulation;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 999px;
background: rgba(255, 255, 255, .05);
color: var(--text);
padding: 10px 14px;
cursor: pointer;
font-weight: 1000;
text-decoration: none;
line-height: 1;
}
.like-btn.active,
.comment-like.active,
.social-action-pill.like-btn.active,
#profile-like-btn.active,
#entry-like-btn.active {
border-color: rgba(255, 77, 109, 0.50) !important;
background: rgba(255, 77, 109, 0.16) !important;
color: #ff4d6d !important;
box-shadow: 0 0 18px rgba(255, 77, 109, 0.38) !important;
}
.like-btn.active:hover,
.comment-like.active:hover,
.social-action-pill.like-btn.active:hover,
#profile-like-btn.active:hover,
#entry-like-btn.active:hover {
border-color: rgba(255, 77, 109, 0.75) !important;
background: rgba(255, 77, 109, 0.28) !important;
color: #ff6584 !important;
box-shadow: 0 0 24px rgba(255, 77, 109, 0.52) !important;
}
.comment-box textarea {
position: relative;
z-index: 3;
width: 100%;
min-height: 90px;
resize: vertical;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 16px;
background: rgba(255, 255, 255, .04);
color: var(--text);
padding: 12px;
font: inherit;
}
.comment-box {
display: grid;
gap: 10px;
margin: 16px 0;
}
.comments-list {
display: grid;
gap: 10px;
}
.comment-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
margin-bottom: 8px;
}
.comment-author {
display: flex;
gap: 10px;
align-items: center;
}
.user-action-trigger {
display: inline-flex;
align-items: center;
gap: 10px;
border: 0;
background: transparent;
color: var(--text);
padding: 0;
cursor: pointer;
text-align: left;
font: inherit;
}
.user-action-trigger strong {
color: var(--text);
}
.user-action-trigger:hover strong {
color: var(--accent);
text-decoration: underline;
}
.avatar {
width: 34px;
height: 34px;
border-radius: 999px;
background: var(--accent-a14);
display: grid;
place-items: center;
color: var(--accent);
font-weight: 1000;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.comment-like {
position: relative;
z-index: 3;
touch-action: manipulation;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 30px;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 999px;
background: rgba(255, 255, 255, .04);
color: var(--muted);
cursor: pointer;
font-weight: 900;
padding: 7px 10px;
line-height: 1;
}
.comment-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.comment-action {
position: relative;
z-index: 3;
touch-action: manipulation;
border: 0;
background: transparent;
color: var(--accent);
cursor: pointer;
font-weight: 900;
}
.comment-sort-tabs {
display: inline-flex;
gap: 6px;
flex-wrap: wrap;
}
.comment-sort-tabs .comment-action {
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, .04);
color: var(--muted);
padding: 7px 10px;
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .04em;
}
.comment-sort-tabs .comment-action.active {
color: var(--text);
border-color: var(--accent-a35);
background: var(--accent-a12);
}
.comment-action.danger {
color: #ff8aa0;
}
.reply-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.reply-author {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.reply-author .user-action-trigger {
min-width: 0;
gap: 8px;
}
.reply-author .avatar {
width: 26px;
height: 26px;
font-size: .72rem;
}
.reply-author strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reply-time {
display: inline !important;
color: var(--muted) !important;
font-size: .72rem !important;
letter-spacing: 0 !important;
text-transform: none !important;
flex-shrink: 0;
}
.reply-body {
margin-top: 4px;
line-height: 1.42;
overflow-wrap: anywhere;
}
.reply-like-wrap {
flex-shrink: 0;
margin: 0 !important;
}
.comment-edit-box {
display: grid;
gap: 8px;
margin-top: 8px;
}
.comment-edit-box textarea {
width: 100%;
min-height: 78px;
resize: vertical;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 14px;
background: rgba(255, 255, 255, .04);
color: var(--text);
padding: 10px;
font: inherit;
}
.profile-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.profile-status {
display: inline-flex;
width: max-content;
margin-top: 8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid var(--accent-a22);
background: var(--accent-a10);
color: var(--accent);
font-size: .76rem;
font-weight: 1000;
letter-spacing: .06em;
text-transform: uppercase;
}
.user-profile-card {
display: grid;
gap: 16px;
}
.user-profile-main {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 18px;
background: rgba(255, 255, 255, .04);
padding: 14px;
}
.user-profile-main.blocked {
border-color: rgba(255, 93, 125, .34);
background: rgba(255, 93, 125, .08);
}
.user-profile-name strong {
display: block;
color: var(--text);
font-size: 1.05rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-profile-name span {
display: block;
color: var(--muted);
font-size: .84rem;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.user-profile-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.user-profile-actions .profile-btn {
display: flex;
justify-content: center;
align-items: center;
min-height: 42px;
text-align: center;
}
.user-profile-actions> :last-child:nth-child(3) {
grid-column: 1 / -1;
}
.user-profile-more {
margin-top: 10px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 16px;
background: rgba(255, 255, 255, .035);
overflow: hidden;
}
.user-profile-more summary {
list-style: none;
cursor: pointer;
padding: 11px 13px;
color: var(--muted);
font-weight: 1000;
text-transform: uppercase;
letter-spacing: .08em;
font-size: .76rem;
}
.user-profile-more summary::-webkit-details-marker {
display: none;
}
.user-profile-more summary:hover {
color: var(--text);
background: var(--accent-a10);
}
.user-profile-more-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
padding: 6px 10px 10px;
}
.user-profile-more-actions .profile-btn {
justify-content: center;
text-align: center;
}
.profile-btn.primary {
border-color: var(--accent-a42);
background: var(--accent-a12);
color: var(--accent);
}
.user-profile-danger {
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.user-profile-danger .profile-btn {
width: 100%;
justify-content: center;
}
.focus-message {
color: var(--muted);
line-height: 1.6;
}
#entry-like-count {
cursor: pointer;
transition: color .2s ease;
}
#entry-like-count:hover {
color: var(--text);
text-decoration: underline;
}
.likers-modal {
position: fixed;
inset: 0;
z-index: 40000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
#confirm-modal.likers-modal {
z-index: 45000;
}
.likers-modal.active {
display: flex;
}
.likers-backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 12, 0.8);
backdrop-filter: blur(12px);
opacity: 0;
transition: opacity 0.2s ease;
}
.likers-modal.active .likers-backdrop {
opacity: 1;
}
.likers-panel {
position: relative;
width: min(400px, 100%);
max-height: 80vh;
background: linear-gradient(180deg, var(--panel), var(--bg));
border: 1px solid var(--accent-a22);
border-radius: 20px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px var(--accent-a12);
display: flex;
flex-direction: column;
transform: scale(0.9);
opacity: 0;
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
z-index: 1;
}
.likers-modal.active .likers-panel {
transform: scale(1);
opacity: 1;
}
.likers-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
position: relative;
}
/* Universal panel divider — adapts to each theme's accent color */
.panel-divider {
width: 100%;
height: 2px;
flex-shrink: 0;
background: linear-gradient(90deg,
transparent 0%,
color-mix(in srgb, var(--accent) 55%, transparent) 18%,
color-mix(in srgb, var(--accent2, var(--accent)) 75%, transparent) 50%,
color-mix(in srgb, var(--accent) 55%, transparent) 82%,
transparent 100%);
opacity: 0.70;
}
/* TERA divider image — hidden for all non-TERA themes */
.tera-divider-img {
display: none;
}
.likers-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 1000;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text);
}
.likers-close {
background: transparent;
border: 0;
color: var(--muted);
cursor: pointer;
font-size: 1.2rem;
font-weight: 1000;
padding: 4px;
transition: color 0.15s;
}
.likers-close:hover {
color: var(--text);
}
.likers-body {
padding: 12px 20px;
overflow-y: auto;
max-height: calc(80vh - 70px);
}
.liker-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
text-decoration: none;
}
.liker-item:last-child {
border-bottom: 0;
}
.liker-name {
font-size: 1rem;
font-weight: 700;
color: var(--text);
transition: color 0.15s;
}
.liker-item:hover .liker-name {
color: var(--accent);
text-decoration: underline;
}
.comment-like-wrap {
display: inline-flex;
align-items: center;
gap: 6px;
}
.comment-like-count {
color: var(--muted);
font-size: 0.8rem;
font-weight: 800;
cursor: pointer;
transition: color 0.18s ease;
padding: 4px 6px;
border-radius: 6px;
}
.comment-like-count:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.05);
}
.contact-modal {
position: fixed;
inset: 0;
z-index: 30100;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
}
#user-action-modal.contact-modal { z-index: 30400; }
.contact-modal.active { display:flex; }
.notifications-panel { width:min(520px,calc(100vw - 28px)); max-height:min(680px,90vh); display:flex; flex-direction:column; overflow:hidden; }
.notifications-toolbar { display:flex; gap:8px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.notifications-body { overflow:auto; padding:16px 18px 18px; }
.contact-panel {
position: relative;
width: min(760px, 100%);
height: min(720px, calc(100vh - 28px));
max-height: calc(100vh - 28px);
background: linear-gradient(180deg, var(--panel), var(--bg));
border: 1px solid var(--accent-a22);
border-radius: 20px;
box-shadow: 0 20px 54px rgba(0,0,0,.52), 0 0 34px var(--accent-a12);
overflow: hidden;
z-index: 1;
display:flex;
flex-direction:column;
}
.contact-header {
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.08);
}
.contact-title { font-size:1.05rem; font-weight:1000; letter-spacing:.08em; text-transform:uppercase; }
.contact-tabs { display:flex; gap:8px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none; flex:1; width:100%; }
.contact-tabs::-webkit-scrollbar { display:none; }
.contact-tab {
flex:0 0 auto;
border:1px solid rgba(255,255,255,.08);
border-radius:999px;
background:rgba(255,255,255,.04);
color:var(--muted);
padding:9px 12px;
cursor:pointer;
font-weight:900;
text-transform:uppercase;
font-size:.76rem;
letter-spacing:.04em;
}
.contact-tab.active,.more-tabs-btn.active,.dropdown-item.active {
color:var(--text);
border-color:var(--accent);
background:var(--accent-a14);
box-shadow:0 0 0 1px var(--accent-a22), 0 0 18px var(--accent-a28), inset 0 1px 0 rgba(255,255,255,.12);
}
.contact-tabs-wrapper { flex:0 0 auto; }
.contact-body { flex:1; min-height:0; padding:16px 18px 18px; overflow-y:auto; overflow-x:hidden; max-height:none; overscroll-behavior:contain; }
.contact-body.messages-mode { overflow:hidden; display:flex; flex-direction:column; padding:12px 14px 14px; }
.contact-list { display:grid; gap:10px; }
.contact-card.blocked { border-color:rgba(255,93,125,.34); background:rgba(255,93,125,.08); }
.contact-card {
display:grid;
grid-template-columns:42px minmax(0, 1fr) auto;
align-items:center;
gap:12px;
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
padding:12px;
}
.contact-card > a { display:contents; color:inherit; text-decoration:none; }
.contact-profile-trigger { display:contents; color:inherit; font:inherit; text-align:left; background:transparent; border:0; padding:0; cursor:pointer; }
.contact-card > a:hover strong { color:var(--accent); text-decoration:underline; }
.contact-profile-trigger:hover strong { color:var(--accent); text-decoration:underline; }
.contact-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contact-card span { display:block; color:var(--muted); font-size:.82rem; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.contact-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.contact-actions .profile-btn { min-height:34px; padding:8px 11px; font-size:.76rem; }
.contact-actions .contact-manage-btn { color:var(--muted); background:rgba(255,255,255,.035); }
.contact-card-more { position:relative; display:inline-flex; }
.contact-card-more summary { list-style:none; }
.contact-card-more summary::-webkit-details-marker { display:none; }
.contact-card-more-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:19000; min-width:158px; display:grid; gap:6px; padding:8px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,var(--panel),var(--bg2)); box-shadow:0 18px 44px rgba(0,0,0,.38); }
.contact-card-more-menu .profile-btn { width:100%; justify-content:center; min-height:34px; padding:8px 12px; }
.user-profile-actions { display:flex; flex-wrap:wrap; gap:10px; }
.user-profile-actions .profile-btn { display:inline-flex; justify-content:center; align-items:center; min-height:42px; text-align:center; }
.user-action-panel { width:min(640px, calc(100vw - 28px)); height:auto; max-height:calc(100vh - 28px); }
.user-action-body { flex:0 1 auto; min-height:0; padding:14px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.custom-contact-card { --profile-accent:var(--accent); --profile-accent2:var(--accent2); width:100%; min-width:0; display:grid; gap:12px; overflow:hidden; }
.custom-contact-card .user-profile-banner { height:118px; border-radius:18px 18px 0 0; border:1px solid color-mix(in srgb,var(--profile-accent) 34%, transparent); border-bottom:0; background-size:cover!important; background-position:center!important; box-shadow:inset 0 -52px 56px rgba(0,0,0,.28), 0 0 28px color-mix(in srgb,var(--profile-accent) 18%, transparent); }
.custom-contact-card .user-profile-main { position:relative; z-index:2; margin-top:0; grid-template-columns:72px minmax(0,1fr) auto; border-top:0; border-radius:0 0 18px 18px; border-color:color-mix(in srgb,var(--profile-accent) 26%, transparent); background:linear-gradient(135deg,rgba(18,18,31,.94),rgba(255,255,255,.035)); box-shadow:0 14px 34px rgba(0,0,0,.20); }
.custom-contact-card .user-profile-avatar-wrap { transform:translateY(-38px); margin-bottom:-38px; }
.user-profile-avatar-wrap { width:72px; height:72px; border-radius:22px; border:3px solid color-mix(in srgb,var(--profile-accent) 54%, var(--bg)); background:var(--bg2); overflow:hidden; box-shadow:0 0 24px color-mix(in srgb,var(--profile-accent) 28%, transparent); }
.user-profile-avatar-wrap .avatar,.user-profile-avatar-wrap .contact-avatar { width:100%; height:100%; border-radius:inherit; }
.custom-contact-card .user-profile-name strong { font-size:1.24rem; }
.custom-contact-card .profile-status { border-color:color-mix(in srgb,var(--profile-accent) 42%, transparent); background:color-mix(in srgb,var(--profile-accent) 13%, transparent); color:var(--text); }
.custom-contact-card .social-role-rail-shell {
position:relative;
min-width:0;
max-width:100%;
padding:0 40px;
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
overflow:hidden;
}
.custom-contact-card .social-role-row.compact {
display:flex;
flex-wrap:nowrap;
gap:8px;
width:100%;
max-width:100%;
min-width:0;
margin-top:0;
padding:10px 0;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior-x:contain;
touch-action:pan-x;
scroll-behavior:smooth;
scrollbar-width:thin;
scrollbar-color:color-mix(in srgb,var(--profile-accent) 48%, transparent) transparent;
mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
}
.custom-contact-card .social-role-row.compact::-webkit-scrollbar { height:6px; }
.custom-contact-card .social-role-row.compact::-webkit-scrollbar-track { background:transparent; }
.custom-contact-card .social-role-row.compact::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--profile-accent) 42%, rgba(255,255,255,.16)); border-radius:999px; }
.social-role-row.compact .social-role-badge { flex:0 0 auto; min-height:32px; max-width:168px; padding:7px 10px; overflow:hidden; justify-content:flex-start; }
.social-role-row.compact .social-role-badge strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.social-role-rail-btn {
position:absolute;
top:50%;
transform:translateY(-50%);
width:30px;
height:30px;
border:1px solid color-mix(in srgb,var(--profile-accent) 38%, rgba(255,255,255,.10));
border-radius:999px;
background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
color:var(--text);
font-size:1.15rem;
font-weight:1000;
display:grid;
place-items:center;
cursor:pointer;
z-index:2;
box-shadow:0 10px 22px rgba(0,0,0,.24);
}
.social-role-rail-btn:hover { color:var(--profile-accent); border-color:var(--profile-accent); }
.social-role-rail-btn.role-rail-prev { left:6px; }
.social-role-rail-btn.role-rail-next { right:6px; }
.user-profile-bio {
position:relative;
border:1px solid color-mix(in srgb,var(--profile-accent) 24%, rgba(255,255,255,.08));
border-radius:16px;
background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 10%, transparent),rgba(255,255,255,.035));
padding:12px 14px 13px;
color:var(--text);
line-height:1.45;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.user-profile-bio-label { display:block; margin-bottom:5px; color:color-mix(in srgb,var(--profile-accent) 72%, var(--text)); font-size:.68rem; font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }
.user-profile-bio-text { font-size:.9rem; color:rgba(255,255,255,.88); overflow-wrap:anywhere; white-space:pre-wrap; }
.social-role-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.social-role-badge {
min-height:30px;
display:inline-flex;
align-items:center;
gap:8px;
padding:5px 9px;
border-radius:999px;
border:1px solid color-mix(in srgb,var(--role-color) 62%, transparent);
background:radial-gradient(circle at 30% 18%, color-mix(in srgb,var(--role-color) 34%, transparent), rgba(255,255,255,.045));
color:var(--text);
font-size:.72rem;
font-weight:1000;
line-height:1;
cursor:pointer;
box-shadow:0 0 14px color-mix(in srgb,var(--role-color) 22%, transparent);
transition:transform .16s ease, box-shadow .16s ease;
}
.social-role-badge .social-role-icon { width:10px; height:10px; border-radius:999px; display:block; background:var(--role-color); flex:0 0 auto; box-shadow:0 0 12px color-mix(in srgb,var(--role-color) 55%, transparent); }
.social-role-badge strong { font:inherit; font-weight:1000; color:var(--text); }
.social-role-badge:hover { transform:translateY(-1px) scale(1.04); box-shadow:0 0 20px color-mix(in srgb,var(--role-color) 34%, transparent); }
.social-role-modal { display:none; position:fixed; inset:0; z-index:30550; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.58); backdrop-filter:blur(8px); }
.social-role-modal.active { display:flex; }
.social-role-panel { width:min(390px,100%); border:1px solid rgba(255,255,255,.12); border-radius:20px; background:linear-gradient(180deg,var(--panel),var(--bg2)); box-shadow:0 24px 70px rgba(0,0,0,.48); padding:16px; }
.social-role-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.social-role-title-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.social-role-title-wrap h3 { margin:0; font-size:1rem; text-transform:uppercase; letter-spacing:.06em; }
.social-role-info-icon { --role-color:#7dd3fc; width:50px; height:50px; border-radius:17px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--role-color) 64%, transparent); background:color-mix(in srgb,var(--role-color) 18%, transparent); color:var(--text); font-size:1.2rem; font-weight:1000; box-shadow:0 0 24px color-mix(in srgb,var(--role-color) 28%, transparent); flex:0 0 auto; }
.social-role-info-meta { color:var(--muted); font-size:.76rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.social-role-info-desc { border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.04); padding:12px; color:var(--text); line-height:1.55; }
.custom-contact-card .user-profile-actions {
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:8px;
}
.custom-contact-card .user-profile-actions .profile-btn { min-width:118px; min-height:36px; padding:9px 12px; font-size:.78rem; }
.custom-contact-card .user-profile-actions .profile-btn.icon-btn { width:auto; min-width:42px; }
@media (max-width:800px) {
.user-action-panel { width:calc(100vw - 16px); max-height:calc(100vh - 16px); }
.user-action-body { padding:10px; }
.custom-contact-card .user-profile-main { grid-template-columns:56px minmax(0,1fr); gap:10px; }
.custom-contact-card .profile-status { grid-column:1 / -1; }
.custom-contact-card .user-profile-avatar-wrap { width:56px; height:56px; border-radius:18px; transform:translateY(-28px); margin-bottom:-28px; }
.custom-contact-card .social-role-rail-shell { padding:0; }
.social-role-rail-btn { display:none; }
.custom-contact-card .social-role-row.compact { mask-image:none; padding:10px; }
}
.contact-role-admin {
display:grid;
gap:10px;
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:12px;
background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}
.contact-role-admin-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.contact-role-admin-head strong { font-size:.82rem; font-weight:1000; text-transform:uppercase; letter-spacing:.08em; }
.contact-role-admin-head span { color:var(--muted); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.role-choice-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:0; }
.role-choice-btn {
--role-color:#7dd3fc;
display:inline-flex;
align-items:center;
gap:8px;
max-width:100%;
min-height:32px;
border:1px solid rgba(255,255,255,.10);
border-radius:999px;
background:rgba(255,255,255,.045);
color:var(--text);
padding:7px 10px;
font:inherit;
font-size:.76rem;
font-weight:900;
cursor:pointer;
transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.role-choice-btn::before {
content:"";
width:9px;
height:9px;
border-radius:999px;
background:var(--role-color);
box-shadow:0 0 12px var(--role-color);
flex:0 0 auto;
}
.role-choice-btn:hover { transform:translateY(-1px); border-color:color-mix(in srgb,var(--role-color) 55%, transparent); background:color-mix(in srgb,var(--role-color) 12%, transparent); }
.role-choice-btn.active { border-color:color-mix(in srgb,var(--role-color) 74%, transparent); background:color-mix(in srgb,var(--role-color) 20%, transparent); box-shadow:0 0 18px color-mix(in srgb,var(--role-color) 22%, transparent); }
.role-choice-btn.active::after { content:"✓"; margin-left:auto; color:var(--role-color); font-weight:1000; }
.role-choice-btn.saving { opacity:.6; pointer-events:none; }
.profile-btn.icon-btn {
width:40px;
min-width:40px;
padding:0;
font-size:1rem;
line-height:1;
}
.popup-msg-btn {
border-color:rgba(125,211,252,.30)!important;
color:#9be7ff!important;
background:rgba(125,211,252,.09)!important;
}
.tag-highlight { outline:2px solid rgba(125,211,252,.42); box-shadow:0 0 0 4px rgba(125,211,252,.08); border-radius:16px; }
.custom-contact-card.profile-effect-glow,
.custom-contact-card.profile-effect-neon-aura { box-shadow:0 0 38px color-mix(in srgb,var(--profile-accent) 36%, transparent), 0 20px 54px rgba(0,0,0,.38)!important; }
.custom-contact-card.profile-effect-animated-border { animation:contact-profile-border 2.8s linear infinite; }
.custom-contact-card.profile-effect-card-shadow { box-shadow:0 30px 82px rgba(0,0,0,.48), 0 0 30px color-mix(in srgb,var(--profile-accent) 20%, transparent)!important; }
.custom-contact-card.profile-effect-hover-lift { transition:transform .2s ease, box-shadow .2s ease; }
.custom-contact-card.profile-effect-hover-lift:hover { transform:translateY(-3px); }
.custom-contact-card.profile-effect-username-glow .user-profile-name strong { text-shadow:0 0 18px color-mix(in srgb,var(--profile-accent) 54%, transparent); }
.custom-contact-card.profile-effect-premium-frame { border-color:rgba(255,214,107,.60)!important; box-shadow:0 0 36px rgba(255,214,107,.16), 0 20px 54px rgba(0,0,0,.38)!important; }
.custom-contact-card.profile-effect-gradient-bg { background:linear-gradient(135deg,var(--bg2),color-mix(in srgb,var(--profile-accent) 12%, transparent),rgba(255,255,255,.025))!important; }
@keyframes contact-profile-border { 0%,100% { border-color:color-mix(in srgb,var(--profile-accent) 30%, transparent); } 50% { border-color:var(--profile-accent); } }
.contact-timeout-icon { margin-right:6px; vertical-align:middle; }
.message-box { display:grid; gap:10px; }
.contact-body.messages-mode .message-box { flex:1; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:8px; }
.contact-body.messages-mode .contact-card { padding:9px; grid-template-columns:38px minmax(0,1fr) auto; }
.contact-body.messages-mode .contact-actions .profile-btn { padding:8px 10px; }
.message-thread { display:flex; flex-direction:column; align-items:flex-start; gap:8px; max-height:320px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.03); scroll-behavior:auto; }
.contact-body.messages-mode .message-thread { flex:1 1 auto; max-height:none; min-height:0; }
.message-bubble { align-self:flex-start; flex:0 0 auto; width:fit-content; min-width:0; max-width:min(86%, 560px); overflow:visible; overflow-wrap:anywhere; word-break:break-word; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.06); color:var(--text); line-height:1.45; }
.message-bubble > div { min-width:0; align-items:flex-start!important; }
.message-bubble span { display:block; min-width:0; max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.message-bubble.mine { align-self:flex-end; background:var(--accent-a16); border:1px solid var(--accent-a22); }
.message-bubble.dm-request-bubble {
display:grid;
gap:7px;
max-width:min(82%, 310px);
padding:9px 10px;
border:1px solid rgba(125,211,252,.22);
background:rgba(125,211,252,.08);
}
.message-bubble.dm-request-bubble.muted {
border-color:rgba(255,255,255,.10);
background:rgba(255,255,255,.045);
}
.dm-request-text { display:grid; gap:2px; }
.dm-request-text strong { font-size:.82rem; line-height:1.2; }
.dm-request-text span { color:var(--muted); font-size:.76rem; line-height:1.25; }
.dm-request-actions { display:flex; gap:6px; flex-wrap:wrap; }
.dm-request-actions .profile-btn { min-height:28px; padding:6px 10px; font-size:.76rem; }
.message-bubble.has-gif { max-width:min(92%, 340px); padding:6px; }
.message-bubble.has-gif .chat-gif { width:min(320px,100%); max-height:240px; }
.message-compose { position:relative; display:grid; grid-template-columns:1fr auto; gap:8px; overflow:visible; }
.message-compose textarea { min-height:58px; max-height:110px; resize:vertical; border:1px solid rgba(255,255,255,.10); border-radius:14px; background:rgba(255,255,255,.04); color:var(--text); padding:10px 11px; font:inherit; line-height:1.34; }
.message-compose #dm-emoji-panel { position:absolute; left:0; right:0; bottom:calc(100% + 8px); width:auto!important; max-height:min(310px, 48vh); margin:0!important; z-index:18000!important; }
.persistent-dm-dock {
position:fixed;
left:18px;
bottom:18px;
z-index:15950;
width:min(420px, calc(100vw - 36px));
max-width:calc(100vw - 36px);
max-height:calc(100vh - 36px);
display:none;
flex-direction:column;
border:1px solid rgba(125,211,252,.22);
border-radius:18px;
overflow:visible;
overscroll-behavior:contain;
background:linear-gradient(180deg,rgba(12,17,28,.98),rgba(8,11,18,.99));
box-shadow:0 22px 68px rgba(0,0,0,.45), 0 0 40px rgba(125,211,252,.10);
backdrop-filter:blur(14px);
transition:opacity .18s ease, transform .18s ease, width .18s ease;
}
.persistent-dm-dock.active { display:flex; }
.persistent-dm-dock.minimized { width:248px; }
.persistent-dm-dock.minimized .dm-dock-body { display:none; }
.persistent-dm-dock.minimized .dm-dock-top { border-bottom:0; }
.dm-dock-top {
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
padding:9px 12px;
border-bottom:1px solid rgba(255,255,255,.08);
color:var(--muted);
font-size:.72rem;
font-weight:1000;
letter-spacing:.12em;
text-transform:uppercase;
cursor:move;
user-select:none;
touch-action:none;
}
.dm-dock-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-dock-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.dm-dock-btn {
position:relative;
width:30px;
height:30px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.11);
border-radius:10px;
background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
color:var(--text);
cursor:pointer;
font:inherit;
font-size:.95rem;
font-weight:1000;
padding:0;
overflow:visible;
transform:skewX(-8deg);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(0,0,0,.22);
}
.dm-dock-btn span { transform:skewX(8deg); display:block; line-height:1; filter:drop-shadow(0 0 8px rgba(125,211,252,.25)); }
.dm-dock-btn:hover { color:#9be7ff; border-color:rgba(125,211,252,.34); background:linear-gradient(135deg,rgba(125,211,252,.16),rgba(255,255,255,.04)); box-shadow:0 0 24px rgba(125,211,252,.12), inset 0 1px 0 rgba(255,255,255,.12); }
.dm-dock-btn.danger:hover { color:#ff9aae; border-color:rgba(255,93,125,.42); background:linear-gradient(135deg,rgba(255,93,125,.18),rgba(255,255,255,.04)); box-shadow:0 0 24px rgba(255,93,125,.18), inset 0 1px 0 rgba(255,255,255,.12); }
.dm-dock-header { display:none; }
.dm-dock-contact { display:flex; align-items:center; gap:10px; min-width:0; }
.dm-dock-contact .avatar { flex:0 0 auto; }
.dm-dock-contact strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-dock-contact span { display:block; color:var(--muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-dock-body { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px; padding:12px; min-height:0; overflow:hidden; overscroll-behavior:contain; touch-action:pan-y; }
.dm-dock-thread { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:180px; max-height:320px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.03); scroll-behavior:auto; }
.dm-dock-thread .message-bubble { max-width:88%; }
.dm-dock-compose { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:stretch; }
.dm-dock-compose textarea {
min-height:58px;
max-height:110px;
resize:vertical;
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
background:rgba(255,255,255,.04);
color:var(--text);
padding:10px 11px;
font:inherit;
line-height:1.34;
}
.dm-dock-compose #dm-dock-emoji-panel {
position:absolute;
left:0;
right:0;
bottom:calc(100% + 8px);
width:auto!important;
max-height:min(310px, 48vh);
margin:0!important;
z-index:18000!important;
overscroll-behavior:contain;
touch-action:pan-y;
}
.dm-dock-compose .chat-tool-btn { min-width:34px; }
.dm-dock-compose .profile-btn { min-width:78px; }
.dm-dock-switcher {
position:absolute;
left:12px;
right:12px;
top:50%;
bottom:auto;
transform:translateY(-50%);
z-index:18500;
display:none;
border:1px solid rgba(125,211,252,.22);
border-radius:16px;
background:rgba(10,14,22,.98);
box-shadow:0 18px 44px rgba(0,0,0,.38);
overflow:hidden;
}
.dm-dock-switcher.drop-down {
top:50%;
bottom:auto;
}
.dm-dock-switcher.active { display:block; }
.dm-dock-switcher-head {
display:flex;
justify-content:space-between;
gap:10px;
align-items:center;
padding:12px 14px;
border-bottom:1px solid rgba(255,255,255,.08);
color:var(--muted);
font-size:.72rem;
font-weight:1000;
text-transform:uppercase;
letter-spacing:.08em;
}
.dm-dock-switcher-body { display:grid; gap:8px; padding:12px 14px 14px; max-height:min(340px, 48vh); overflow:auto; overscroll-behavior:contain; touch-action:pan-y; }
.dm-dock-switcher-search {
width:100%;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:10px;
padding:9px 10px;
color:var(--text);
font:inherit;
box-sizing:border-box;
}
.dm-dock-switcher-list { display:grid; gap:8px; }
.dm-dock-switcher-item {
display:grid;
gap:8px;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
background:rgba(255,255,255,.04);
padding:10px;
color:inherit;
text-align:left;
font:inherit;
}
.dm-dock-switcher-main {
display:grid;
grid-template-columns:34px minmax(0,1fr) auto;
align-items:center;
gap:10px;
width:100%;
padding:0;
border:0;
background:transparent;
color:inherit;
text-align:left;
cursor:pointer;
font:inherit;
}
.dm-dock-switcher-item:hover { border-color:rgba(125,211,252,.22); background:rgba(125,211,252,.08); }
.dm-dock-switcher-main strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-dock-switcher-main span { display:block; color:var(--muted); font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-dock-switcher-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.dm-dock-switcher-actions .profile-btn, .dm-dock-switcher-actions .tab-badge { min-height:28px; }
.dm-dock-switcher-empty { color:var(--muted); font-size:.85rem; padding:8px 2px; }
.danger-btn { border-color:rgba(255,93,125,.32)!important; color:#ff9aae!important; background:rgba(255,93,125,.08)!important; }
.notify-btn { position:relative; min-width:42px; padding-inline:12px; }
.notify-badge { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; border-radius:999px; background:#ff5d7d; color:white; display:none; place-items:center; font-size:.72rem; font-weight:1000; border:2px solid var(--bg); }
.notify-badge.active { display:grid; }
.toast-stack { position:fixed; right:18px; bottom:18px; z-index:10000; display:grid; gap:10px; width:min(380px, calc(100vw - 36px)); }
.toast { display:grid; grid-template-columns:38px minmax(0,1fr) 24px; gap:10px; align-items:center; text-align:left; border:1px solid var(--accent-a28); border-radius:16px; background:rgba(10,14,22,.96); color:var(--text); padding:12px; box-shadow:0 18px 46px rgba(0,0,0,.34); cursor:pointer; }
.toast-avatar { width:38px; height:38px; border-radius:999px; display:grid; place-items:center; background:var(--accent-a14); color:var(--accent); overflow:hidden; font-weight:1000; }
.toast-avatar img { width:100%; height:100%; object-fit:cover; }
.toast-copy { min-width:0; display:grid; gap:2px; }
.toast strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast em { color:var(--accent); font-style:normal; font-size:.76rem; font-weight:900; }
.toast span span { color:var(--muted); font-size:.82rem; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.toast-close { width:24px; height:24px; border-radius:999px; display:grid; place-items:center; color:var(--muted); font-size:1.05rem; font-weight:1000; line-height:1; }
.toast-close:hover { background:rgba(255,255,255,.08); color:var(--text); }
.settings-grid { display:grid; gap:14px; }
.setting-card,.reply-card { border:1px solid var(--line); border-radius:16px; background:var(--bg2); padding:12px; }
.setting-card label { display:flex; gap:10px; align-items:center; margin:8px 0; color:var(--text); }
.notifications-toolbar .profile-btn.active,
.notifications-toolbar .profile-btn.has-unread {
border-color:var(--accent)!important;
background:var(--accent-a14)!important;
color:var(--text)!important;
box-shadow:0 0 0 1px var(--accent-a22), 0 0 18px var(--accent-a28), inset 0 1px 0 rgba(255,255,255,.12);
}
.notification-card { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; text-align:left; font:inherit; color:var(--text); border:1px solid var(--line); border-radius:16px; background:var(--bg2); padding:10px; cursor:pointer; transition:background .2s,border-color .2s; list-style:none; }
.notification-card::-webkit-details-marker { display:none; }
.notification-card:hover { background:var(--accent-a10); border-color:var(--accent-a22); }
.notification-card.unread { border-color:var(--accent-a35); background:var(--accent-a10); }
.notification-card strong,.reply-card strong { display:block; color:var(--text); }
.notification-card strong { min-width:0; }
.notification-actor-btn { max-width:100%; border:0; background:none; color:var(--text); padding:0; margin:0 6px 0 0; font:inherit; font-weight:1000; cursor:pointer; text-decoration:underline; text-decoration-color:var(--accent-a22); text-underline-offset:3px; }
.notification-actor-btn:hover { color:var(--accent); text-decoration-color:var(--accent); }
.notification-actor-filter { display:flex; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--accent-a22); border-radius:14px; background:var(--accent-a10); padding:9px 10px; margin-bottom:8px; }
.notification-actor-filter span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:1000; }
.notification-card .chat-gif { display:block; width:min(220px,100%); max-height:150px; margin-top:8px; border-radius:10px; object-fit:cover; }
.notification-card .chat-custom-emoji { width:28px; height:28px; vertical-align:middle; }
.notification-avatar { width:38px; height:38px; border-radius:999px; display:grid; place-items:center; background:var(--accent-a14); color:var(--accent); overflow:hidden; font-weight:1000; flex:0 0 auto; }
.notification-avatar img { width:100%; height:100%; object-fit:cover; }
.notification-copy { min-width:0; display:grid; gap:3px; }
.notification-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notification-copy span { color:var(--muted); font-size:.82rem; min-width:0; }
.notification-copy em { color:var(--muted); font-style:normal; font-size:.76rem; }
.notification-leaf { display:grid; gap:0; width:100%; border:1px solid var(--line); border-radius:16px; background:var(--bg2); overflow:hidden; transition:background .2s,border-color .2s; }
.notification-leaf.unread { border-color:var(--accent-a35); background:var(--accent-a10); }
.notification-leaf .notification-card { flex:1; min-width:0; border:0; border-radius:0; background:transparent; }
.notification-leaf .notification-card:hover { background:var(--accent-a10); }
.notification-leaf .notification-card.unread { border-color:transparent; background:transparent; }
.notification-leaf .notification-card .notification-copy { grid-column:auto; }
.notification-expand { position:relative; flex:0 0 auto; width:30px; height:30px; border:1px solid var(--accent-a28); border-radius:999px; background:rgba(255,255,255,.055); color:var(--text); font-size:0; line-height:1; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(0,0,0,.18); transition:color .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease; }
.notification-expand::before { content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:translate(-62%,-50%) rotate(-45deg); transform-origin:center; transition:transform .16s ease; }
.notification-card:hover .notification-expand, .notification-leaf[open] .notification-expand { color:var(--accent); border-color:var(--accent-a42); background:var(--accent-a14); box-shadow:0 0 22px var(--accent-a14), inset 0 1px 0 rgba(255,255,255,.12); }
.notification-leaf[open] .notification-expand::before { transform:translate(-50%,-62%) rotate(45deg); }
.notification-inline-actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; padding:0 10px 10px; border-top:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); }
.notification-inline-actions .profile-btn { min-height:30px; padding:7px 12px; }
.notification-group { border:1px solid var(--line); border-radius:16px; background:var(--bg2); overflow:hidden; }
.notification-group.unread { border-color:var(--accent-a35); background:var(--accent-a10); }
.notification-group summary { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; cursor:pointer; list-style:none; }
.notification-group summary::-webkit-details-marker { display:none; }
.notification-group summary:hover { background:var(--accent-a10); }
.notification-count { min-width:26px; height:26px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--accent-a22); background:var(--accent-a14); color:var(--text); font-size:.78rem; font-weight:1000; }
.notification-group-list { display:grid; gap:7px; padding:0 10px 10px 58px; }
.notification-group-list .notification-card { grid-template-columns:minmax(0,1fr) auto; padding:9px 10px; }
.notification-delete-group-btn { margin:0 10px 10px 58px; border:1px solid rgba(255,93,125,.2); background:rgba(255,93,125,.05); color:#ff9aae; border-radius:12px; padding:8px 10px; cursor:pointer; font-weight:900; }
.chat-mention {
color:#7dd3fc;
font:inherit;
font-weight:900;
background:none;
border:0;
padding:0;
cursor:pointer;
text-decoration:underline;
text-decoration-color:rgba(125,211,252,.24);
text-underline-offset:2px;
}
.chat-mention:hover { color:#c7f1ff; text-decoration-color:rgba(199,241,255,.45); }
.tag-suggest-panel {
position:fixed;
z-index:32050;
width:min(360px, calc(100vw - 24px));
border:1px solid rgba(125, 211, 252, .24);
border-radius:14px;
background:rgba(10,14,22,.98);
box-shadow:0 16px 42px rgba(0,0,0,.44);
display:none;
overflow:hidden;
}
.tag-suggest-panel.active { display:block; }
.tag-suggest-head {
padding:10px 12px 8px;
border-bottom:1px solid rgba(255,255,255,.08);
color:var(--muted);
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.05em;
font-weight:900;
}
.tag-suggest-list { display:grid; max-height:240px; overflow:auto; }
.tag-suggest-item {
display:grid;
grid-template-columns:34px minmax(0,1fr);
gap:10px;
align-items:center;
padding:10px 12px;
border:0;
background:transparent;
color:var(--text);
text-align:left;
cursor:pointer;
font:inherit;
}
.tag-suggest-item:hover,
.tag-suggest-item.active { background:rgba(125, 211, 252, .12); }
.tag-suggest-item strong { display:block; font-size:.92rem; }
.tag-suggest-item span { display:block; color:var(--muted); font-size:.8rem; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag-suggest-avatar { width:34px; height:34px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.08); display:grid; place-items:center; color:var(--text); font-weight:900; }
.tag-suggest-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
/* Dropdown and More Tab styles */
.contact-tabs-wrapper { position: relative; }
.more-tabs-dropdown {
position: absolute;
top: calc(100% - 6px);
right: 18px;
z-index: 1000;
background: rgba(10, 14, 22, 0.98);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
display: none;
flex-direction: column;
min-width: 180px;
padding: 6px;
}
.more-tabs-dropdown.active { display: flex; }
.more-tabs-btn {
flex: 0 0 auto;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: var(--muted);
padding: 9px 14px;
cursor: pointer;
font-weight: 900;
font-size: .76rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.more-tabs-btn:hover { border-color: var(--accent-a35); background: var(--accent-a12); color: var(--text); }
.more-tabs-btn.active { color: var(--text); border-color: var(--accent-a42); background: var(--accent-a12); }
.contact-more-wrap { position:relative; flex:0 0 auto; }
.contact-more-wrap .more-tabs-dropdown { top:calc(100% + 8px); right:0; }
.dropdown-item {
background: none;
border: none;
border-radius: 8px;
color: var(--muted);
padding: 8px 12px;
text-align: left;
cursor: pointer;
font-weight: 700;
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.04em;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
box-sizing: border-box;
}
.dropdown-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.dropdown-item.active { color:var(--text); background:var(--accent-a14); border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-a22), 0 0 18px var(--accent-a28), inset 0 1px 0 rgba(255,255,255,.12); }
.tab-badge {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:max-content;
min-height:22px;
padding:0 8px;
border-radius:999px;
border:1px solid rgba(255,255,255,.12);
background:linear-gradient(135deg,rgba(125,211,252,.16),rgba(255,255,255,.06));
color:var(--text);
font-size:.72rem;
font-weight:900;
letter-spacing:.02em;
margin-left:8px;
white-space:nowrap;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
/* Consecutive chat message grouping */
.chat-message.consecutive {
margin-top: -3px;
}
.chat-avatar-placeholder {
width: 26px;
height: 1px;
display: block;
}
/* Custom Emoji and Picker styles */
.chat-custom-emoji {
width: 22px;
height: 22px;
vertical-align: middle;
object-fit: contain;
display: inline-block;
margin: 0 2px;
}
.emoji-picker-container {
display: flex;
flex-direction: column;
width: 100%;
}
.picker-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--muted);
padding: 6px 12px;
cursor: pointer;
font-weight: 800;
font-size: 0.78rem;
text-transform: uppercase;
transition: color 0.15s, border-color 0.15s;
}
.picker-tab.active {
color: var(--accent);
border-bottom-color: var(--accent);
}
.picker-search {
width: 100%;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
padding: 8px 10px;
color: var(--text);
font-size: 0.82rem;
box-sizing: border-box;
margin-bottom: 4px;
}
.picker-emoji-btn {
background: none;
border: none;
padding: 4px;
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.picker-emoji-btn:hover {
background: rgba(255, 255, 255, 0.08) !important;
}
.picker-gif-btn {
background: none;
border: none;
padding: 2px;
cursor: pointer;
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
transition: background 0.15s, transform 0.15s;
}
.picker-gif-btn:hover {
background: rgba(255, 255, 255, 0.08) !important;
transform: scale(1.02);
}
.reply-card .reply-author strong { display:inline!important; }
.notification-card span { display:block; color:var(--muted); font-size:.82rem; margin-top:0; }
.reply-list { display:grid; gap:8px; margin-top:10px; padding-left:14px; border-left:2px solid var(--accent-a22); }
.reply-compose { display:none; grid-template-columns:1fr; gap:8px; margin-top:10px; background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:10px; }
.reply-compose textarea { width:100%; min-height:60px; resize:vertical; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--text); padding:8px 10px; font:inherit; }
.reply-compose-actions { display:flex; justify-content:flex-end; gap:8px; }
.notification-item { display:flex; gap:8px; align-items:stretch; width:100%; }
.notification-delete-btn { border:1px solid rgba(255,93,125,.2); background:rgba(255,93,125,.05); color:#ff9aae; border-radius:16px; padding:12px 14px; cursor:pointer; font-weight:700; font-size:.85rem; transition:background .2s,border-color .2s; display:grid; place-items:center; }
.notification-delete-btn:hover { background:rgba(255,93,125,.15); border-color:rgba(255,93,125,.4); }
.ban-tools { display:grid; gap:10px; }
.ban-search-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.ban-search-row input { min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--bg); color:var(--text); padding:11px 12px; font:inherit; }
.ban-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; border:1px solid rgba(255,93,125,.22); border-radius:16px; background:rgba(255,93,125,.06); padding:12px; }
.ban-card strong { display:block; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ban-card span { display:block; color:var(--muted); font-size:.82rem; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ban-meta { display:grid; gap:3px; min-width:0; }
@media (max-height:760px) { .contact-modal { padding:8px; } .contact-panel { height:calc(100vh - 16px); max-height:calc(100vh - 16px); } .contact-header { padding:11px 14px; } .contact-tabs-wrapper { padding:10px 14px 0!important; padding-bottom:10px!important; } .contact-body.messages-mode { padding:9px 10px 10px; } .contact-body.messages-mode .contact-card { padding:8px; } .message-thread { padding:8px; gap:7px; } .message-compose textarea { min-height:48px; max-height:82px; padding:9px 10px; } }
@media (max-width:800px) { h1 { font-size:2.3rem; } .hero { grid-template-columns:1fr; padding:22px; } .global-chat { min-height:0; } .global-chat.fullscreen { inset:0; border-radius:0; } .global-chat.fullscreen .chat-head { border-radius:0; } .chat-head { align-items:flex-start; flex-direction:column; } .chat-head-actions { width:100%; justify-content:flex-start; } .chat-compose { grid-template-columns:1fr; } .chat-send { width:100%; } #chat-emoji-panel,.global-chat.fullscreen #chat-emoji-panel { bottom:124px; max-height:min(180px, 32vh); } .board-head { flex-direction:column; } .member-row { grid-template-columns:1fr; } .group-head { align-items:flex-start; flex-direction:column; } .class-nav-btn { display:none; } .class-toolbar { scrollbar-width:thin; } .class-toolbar::-webkit-scrollbar { display:block; height:6px; } .class-toolbar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:999px; } .focus-panel { top:auto; bottom:0; height:88%; border-left:0; border-top:1px solid var(--accent-a22); transform:translateY(105%); } .run-focus.active .focus-panel { transform:translateY(0); } .focus-grid { grid-template-columns:1fr; } .user-profile-main { grid-template-columns:44px minmax(0,1fr); } .user-profile-main .profile-status { grid-column:1 / -1; } .user-profile-actions { grid-template-columns:1fr; } }
/* --- Custom Button Styles & Animations --- */
/* Neon Electric Button */
.btn-neon-electric {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
font-family: 'Outfit', sans-serif;
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #fff !important;
background: rgba(12, 13, 28, 0.88) !important;
border: 2.5px solid var(--accent) !important;
border-radius: 10px;
cursor: pointer;
overflow: hidden;
text-decoration: none !important;
box-shadow: 0 0 15px var(--accent-a28), inset 0 0 10px var(--accent-a14);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
min-width: 285px;
max-width: 100%;
}
.btn-neon-electric:hover {
border-color: #fff !important;
box-shadow: 0 0 35px var(--accent), inset 0 0 15px var(--accent-a42);
text-shadow: 0 0 10px #fff, 0 0 20px var(--accent);
animation: neon-hover-flash 0.15s infinite alternate;
transform: scale(1.04);
}
@keyframes neon-hover-flash {
0% { opacity: 0.96; box-shadow: 0 0 22px var(--accent), inset 0 0 10px var(--accent-a28); }
100% { opacity: 1; box-shadow: 0 0 38px var(--accent), inset 0 0 18px var(--accent-a42); }
}
.btn-neon-electric.flicker-active {
animation: neon-box-flicker 0.8s ease-in-out forwards;
transform: scale(1.04);
}
@keyframes neon-box-flicker {
0%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 100% {
box-shadow: 0 0 35px var(--accent), inset 0 0 15px var(--accent-a42);
border-color: #fff !important;
background: rgba(12, 13, 28, 0.88) !important;
}
3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79% {
box-shadow: 0 0 5px rgba(255,255,255,0.05), inset 0 0 2px rgba(255,255,255,0.02);
border-color: var(--accent-a28) !important;
background: rgba(12, 13, 28, 0.2) !important;
}
}
.neon-btn-text {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
flex-wrap: nowrap;
}
.neon-btn-text span {
display: inline-block;
color: #fff;
text-shadow: 0 0 10px var(--accent);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.35);
}
.btn-neon-electric.flicker-active .neon-btn-text span {
animation: neon-text-flicker 0.8s ease-in-out forwards;
}
@keyframes neon-text-flicker {
0%, 4%, 6%, 8%, 10%, 12%, 14%, 16%, 18%, 20%, 22%, 24%, 26%, 28%, 30%, 32%, 34%, 36%, 38%, 40%, 42%, 44%, 46%, 48%, 50%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 100% {
color: #fff;
text-shadow: 0 0 15px #fff, 0 0 25px var(--accent);
}
3%, 5%, 7%, 9%, 11%, 13%, 15%, 17%, 19%, 21%, 23%, 25%, 27%, 29%, 31%, 33%, 35%, 37%, 39%, 41%, 43%, 45%, 47%, 49%, 55%, 57%, 59%, 61%, 63%, 65%, 67%, 69%, 71%, 73%, 75%, 77%, 79% {
color: rgba(255, 255, 255, 0.15);
text-shadow: none;
}
}
.neon-btn-text span:hover {
animation: letter-giggle 0.4s ease infinite alternate;
}
@keyframes letter-giggle {
0% { transform: translateY(0) scale(1) rotate(0deg); }
100% { transform: translateY(-8px) scale(1.2) rotate(-8deg); color: #fff; text-shadow: 0 0 15px #fff, 0 0 25px var(--accent); }
}
/* Radio Station Cards */
.station-buttons-group {
display: flex;
gap: 12px;
margin-top: 0;
flex-wrap: wrap;
}
.station-card-btn {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 12px;
padding: 10px 16px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
}
.station-card-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.station-card-btn:hover::before {
opacity: 1;
}
.station-card-btn:hover {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.16) !important;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.station-icon-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
transition: transform 0.3s ease;
}
.station-card-btn:hover .station-icon-wrap {
transform: scale(1.1);
}
.station-logo {
width: 18px;
height: 18px;
display: block;
}
.youtube-btn .station-logo {
color: #ff0000;
filter: drop-shadow(0 0 6px rgba(255,0,0,0.5));
}
.station-info {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.2;
}
.station-name {
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
font-weight: 700;
color: #fff;
}
.station-tag {
font-size: 0.75rem;
color: var(--muted);
font-weight: 500;
}
.station-play-badge {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--accent);
color: #fff;
box-shadow: 0 0 8px var(--accent-a35);
transition: all 0.3s ease;
opacity: 0.7;
}
.station-card-btn:hover .station-play-badge {
opacity: 1;
transform: scale(1.1);
box-shadow: 0 0 12px var(--accent);
background: #fff;
color: var(--accent);
}
.play-icon-svg {
width: 12px;
height: 12px;
display: block;
fill: currentColor;
}
.hero-actions-row {
display: flex;
align-items: center;
gap: 28px;
margin-top: 24px;
flex-wrap: wrap;
min-width: 0;
}
.hero-primary-action {
min-width: 0;
max-width: 100%;
}
.hero-actions-divider {
width: 1px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
}
.station-actions {
display: flex;
align-items: center;
margin-top: 0 !important;
}
@media (max-width: 800px) {
.hero-actions-row {
flex-direction: column;
align-items: stretch;
gap: 20px;
}
.hero-primary-action {
width: 100%;
}
.btn-neon-electric,
.btn-cyber-glitch,
.btn-rainbow-flow,
.hero-cta {
width: 100%;
min-width: 0;
min-height: 46px;
padding-inline: 18px;
font-size: 1rem;
text-align: center;
}
.hero-actions-divider {
display: none;
}
.station-actions {
width: 100%;
}
.station-buttons-group {
width: 100%;
}
.station-card-btn {
flex: 1;
min-width: 130px;
justify-content: center;
}
}
@media (max-width: 420px) {
.btn-neon-electric,
.btn-cyber-glitch,
.btn-rainbow-flow {
letter-spacing: 1.4px;
padding-inline: 14px;
}
.station-card-btn {
width: 100%;
flex-basis: 100%;
}
}
/* Cyber Glitch Button */
.btn-cyber-glitch {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
font-family: 'Outfit', sans-serif;
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff !important;
background: #000 !important;
border: 2px solid #00f0ff !important;
border-radius: 0px;
cursor: pointer;
overflow: hidden;
text-decoration: none !important;
box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
transition: transform 0.2s ease;
}
.btn-cyber-glitch::after {
content: 'JOIN DISCORD';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: #000;
display: flex; align-items: center; justify-content: center;
text-shadow: -2px 0 #ff007c, 2px 0 #00f0ff;
clip: rect(0, 0, 0, 0);
}
.btn-cyber-glitch:hover {
transform: scale(1.03);
box-shadow: 0 0 25px rgba(0, 240, 255, 0.6);
}
.btn-cyber-glitch:hover::after {
animation: glitch-anim 1s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { clip: rect(10px, 9999px, 30px, 0); }
20% { clip: rect(80px, 9999px, 5px, 0); }
40% { clip: rect(40px, 9999px, 75px, 0); }
60% { clip: rect(95px, 9999px, 20px, 0); }
80% { clip: rect(15px, 9999px, 55px, 0); }
100% { clip: rect(60px, 9999px, 90px, 0); }
}
/* Rainbow Flow Button */
.btn-rainbow-flow {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 32px;
font-family: 'Outfit', sans-serif;
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff !important;
background: linear-gradient(90deg, #ff007c, #947cff, #67d9ff, #ffd66b, #ff007c) !important;
background-size: 400% 100% !important;
border: none !important;
border-radius: 30px;
cursor: pointer;
text-decoration: none !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
animation: rainbow-shift 8s linear infinite;
}
@keyframes rainbow-shift {
0% { background-position: 0% 50%; }
100% { background-position: 400% 50%; }
}
.btn-rainbow-flow:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 25px rgba(148, 124, 255, 0.6);
}
body {
position:relative;
overflow-x:clip;
overflow-y:visible;
}
body::after {
content:"";
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
background:
radial-gradient(circle at 14% 12%, var(--accent-a16), transparent 24%),
radial-gradient(circle at 86% 8%, var(--accent2-a18), transparent 26%),
linear-gradient(115deg, transparent 0 32%, var(--accent-a10) 33%, transparent 38% 100%);
opacity:.44;
animation:themeAmbientDrift 11s ease-in-out infinite alternate;
}
.shell { position:relative; z-index:1; }
body.light-theme::after { opacity:.26; }
body.light-theme {
--text:#111318;
--muted:#596273;
--line:rgba(16,18,24,.16);
--gold:#755000;
--danger:#b42348;
--soft-line:rgba(16,18,24,.18);
--surface-1:color-mix(in srgb,var(--panel) 90%,#fff 10%);
--surface-2:color-mix(in srgb,var(--panel) 82%,var(--accent) 6%);
--surface-3:color-mix(in srgb,var(--bg2) 88%,#fff 12%);
--surface-hover:color-mix(in srgb,var(--panel) 72%,var(--accent) 12%);
--soft-glow:color-mix(in srgb,var(--accent) 16%,transparent);
--page-grid:rgba(16,18,24,.07);
}
body.light-theme .hero-title,
body.light-theme .nav-item,
body.light-theme .board-link-btn,
body.light-theme .mode-btn,
body.light-theme .class-btn,
body.light-theme .class-nav-btn,
body.light-theme .profile-btn,
body.light-theme .chat-send,
body.light-theme .chat-tool-btn,
body.light-theme .dropdown-item {
text-shadow:none!important;
}
body[data-theme="apple-black-glass"] {
--surface-1:rgba(18,20,27,.84);
--surface-2:rgba(255,255,255,.07);
--surface-3:rgba(10,11,16,.9);
--surface-hover:rgba(255,255,255,.115);
--soft-line:rgba(210,225,255,.18);
--soft-glow:rgba(135,168,255,.22);
--page-grid:rgba(225,235,255,.045);
}
body[data-theme="apple-black-glass"]::after {
background:
radial-gradient(circle at 18% 10%, rgba(255,255,255,.13), transparent 22%),
radial-gradient(circle at 84% 8%, rgba(135,168,255,.24), transparent 28%),
linear-gradient(120deg, transparent 0 28%, rgba(255,255,255,.075) 29%, transparent 33% 100%);
opacity:.46;
}
body[data-theme="jujutsu-kaisen"]::after,
body[data-theme="tokyo-ghoul"]::after {
background:
repeating-linear-gradient(115deg, transparent 0 18px, var(--accent-a10) 18px 19px, transparent 19px 38px),
radial-gradient(circle at 84% 18%, var(--accent2-a18), transparent 24%),
radial-gradient(circle at 18% 8%, var(--accent-a22), transparent 26%);
}
body[data-theme="dbz"]::after,
body[data-theme="naruto"]::after,
body[data-theme="one-piece"]::after {
background:
radial-gradient(circle at 16% 10%, var(--accent-a28), transparent 28%),
radial-gradient(circle at 88% 16%, var(--accent2-a18), transparent 30%),
repeating-linear-gradient(135deg, transparent 0 22px, var(--accent2-a12) 22px 24px, transparent 24px 48px);
}
body[data-theme="manga"]::after{
background:
radial-gradient(circle at 80% 10%, var(--accent-a12), transparent 26%),
repeating-linear-gradient(45deg, transparent 0 11px, color-mix(in srgb,var(--text) 7%,transparent) 11px 12px, transparent 12px 22px);
opacity:.34;
}
body[data-theme="bleach"]::after {
background:
linear-gradient(90deg, rgba(247,251,255,.10), transparent 9%, transparent 91%, rgba(92,233,255,.10)),
linear-gradient(180deg, transparent 0 76%, rgba(92,233,255,.085)),
repeating-linear-gradient(116deg, transparent 0 32px, rgba(247,251,255,.035) 32px 33px, transparent 33px 68px),
radial-gradient(circle at 82% 12%, rgba(92,233,255,.14), transparent 24%);
opacity:.34;
}
body[data-theme="playstation"]::after,
body[data-theme="xbox"]::after,
body[data-theme="steam"]::after,
body[data-theme="windows"]::after,
body[data-theme="cyberpunk"]::after,
body[data-theme="arcade-neon"]::after {
background:
linear-gradient(90deg, var(--accent-a10) 1px, transparent 1px),
linear-gradient(var(--accent2-a12) 1px, transparent 1px),
radial-gradient(circle at 78% 12%, var(--accent2-a18), transparent 27%);
background-size:42px 42px,42px 42px,auto;
}
body[data-theme="sakura"]::after {
background:
radial-gradient(circle at 18% 8%, var(--accent-a16), transparent 25%),
radial-gradient(circle at 82% 14%, var(--accent2-a18), transparent 24%),
repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb,var(--accent) 7%,transparent) 18px 19px, transparent 19px 38px);
opacity:.24;
}
body[data-theme="midnight-samurai"]::after {
background:
linear-gradient(120deg, transparent 0 31%, color-mix(in srgb,var(--accent) 5%,transparent) 32%, transparent 35% 100%),
radial-gradient(circle at 18% 10%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 26%),
radial-gradient(circle at 82% 16%, color-mix(in srgb,var(--accent2) 7%,transparent), transparent 28%);
opacity:.18;
}
.hero,
.leaderboard-card,
.topbar,
.event-panel,
.global-chat,
.contact-panel,
.likers-panel,
.focus-panel,
.persistent-dm-dock,
.persistent-music-dock,
.tag-suggest-panel,
.more-tabs-dropdown,
.dm-dock-switcher,
.social-role-panel,
.contact-card-more-menu,
.contact-role-admin,
.user-action-panel,
.notifications-panel {
border-color:var(--soft-line)!important;
background:linear-gradient(180deg,var(--surface-1),var(--surface-3))!important;
box-shadow:0 24px 70px rgba(0,0,0,.34), 0 0 34px var(--soft-glow), inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent)!important;
}
body.light-theme .hero,
body.light-theme .leaderboard-card,
body.light-theme .topbar,
body.light-theme .event-panel,
body.light-theme .global-chat,
body.light-theme .contact-panel,
body.light-theme .likers-panel,
body.light-theme .focus-panel,
body.light-theme .persistent-dm-dock,
body.light-theme .persistent-music-dock {
box-shadow:0 18px 48px color-mix(in srgb,var(--text) 13%,transparent), 0 0 24px var(--soft-glow), inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent)!important;
}
.hero::before,
.leaderboard-card::before,
.topbar::before {
background:linear-gradient(120deg, color-mix(in srgb,var(--text) 7%,transparent), transparent 28%, transparent 70%, var(--accent-a16))!important;
}
.contact-tabs-wrapper,
.chat-head,
.music-dock-top,
.dm-dock-top,
.dm-dock-switcher-head,
.notifications-toolbar,
.notification-inline-actions,
.user-profile-danger {
border-color:var(--soft-line)!important;
}
.nav-item,
.board-link-btn,
.mode-btn,
.class-btn,
.class-nav-btn,
.contact-tab,
.hero-cta,
.profile-btn,
.like-btn,
.comment-btn,
.comment-like,
.comment-action,
.chat-icon-btn,
.chat-send,
.chat-tool-btn,
.chat-status-btn,
.music-dock-btn,
.dm-dock-btn,
.more-tabs-btn,
.dropdown-item,
.notification-expand,
.tab-badge,
.btn-neon-electric,
.btn-cyber-glitch,
.btn-rainbow-flow,
.station-card-btn,
.role-choice-btn,
.social-role-badge {
border-color:var(--soft-line)!important;
background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--surface-3) 82%,transparent))!important;
color:var(--text)!important;
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 8%,transparent), 0 8px 22px color-mix(in srgb,var(--bg) 24%,transparent);
}
.nav-item:hover,
.board-link-btn:hover,
.mode-btn:hover,
.class-btn:hover,
.class-nav-btn:hover,
.contact-tab:hover,
.hero-cta:hover,
.profile-btn:hover,
.like-btn:hover,
.comment-btn:hover,
.comment-like:hover,
.chat-icon-btn:hover,
.chat-send:hover,
.chat-tool-btn:hover,
.chat-status-btn:hover,
.music-dock-btn:hover,
.dm-dock-btn:hover,
.more-tabs-btn:hover,
.dropdown-item:hover,
.station-card-btn:hover,
.role-choice-btn:hover {
border-color:var(--accent-a42)!important;
background:linear-gradient(135deg,var(--surface-hover),var(--accent-a12))!important;
box-shadow:0 12px 28px var(--accent-a14), inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent);
}
.nav-item.active,
.mode-btn.active,
.class-btn.active,
.contact-tab.active,
.more-tabs-btn.active,
.dropdown-item.active,
.profile-btn.primary,
.hero-cta.primary,
.chat-send,
.notification-card.unread,
.notification-leaf.unread,
.notification-group.unread {
border-color:var(--accent-a42)!important;
background:linear-gradient(135deg,var(--accent-a22),var(--accent2-a18),var(--surface-2))!important;
box-shadow:0 0 0 1px var(--accent-a22), 0 0 28px var(--accent-a22), inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;
}
.contact-card,
.group-card,
.member-row,
.carousel-item,
.setting-card,
.reply-card,
.notification-card,
.notification-leaf,
.notification-group,
.message-thread,
.dm-dock-thread,
.message-bubble,
.focus-stat,
.focus-player,
.comment-card,
.user-profile-main,
.user-profile-more,
.social-role-info-desc,
.dm-dock-switcher-item,
.empty-box,
.reply-compose,
.ban-card,
.contact-role-admin,
.role-choice-grid,
.user-profile-bio,
.social-role-info-desc {
border-color:var(--soft-line)!important;
background:linear-gradient(135deg,var(--surface-2),color-mix(in srgb,var(--surface-3) 88%,transparent))!important;
color:var(--text);
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent);
}
.message-bubble.mine,
.chat-message.mine .chat-bubble {
border-color:var(--accent-a35)!important;
background:linear-gradient(135deg,var(--accent-a22),var(--surface-2))!important;
box-shadow:0 0 22px var(--accent-a12);
}
.chat-compose textarea,
.message-compose textarea,
.dm-dock-compose textarea,
.comment-box textarea,
.comment-edit-box textarea,
.ban-search-row input,
.picker-search,
.dm-dock-switcher-search,
.reply-compose textarea {
border-color:var(--soft-line)!important;
background:color-mix(in srgb,var(--surface-1) 88%,var(--bg) 12%)!important;
color:var(--text)!important;
box-shadow:inset 0 1px 0 color-mix(in srgb,var(--text) 6%,transparent);
}
.chat-compose textarea:focus,
.message-compose textarea:focus,
.dm-dock-compose textarea:focus,
.comment-box textarea:focus,
.comment-edit-box textarea:focus,
.ban-search-row input:focus,
.picker-search:focus,
.dm-dock-switcher-search:focus,
.reply-compose textarea:focus {
outline:none;
border-color:var(--accent-a42)!important;
box-shadow:0 0 0 3px var(--accent-a16), inset 0 1px 0 color-mix(in srgb,var(--text) 9%,transparent);
}
.toast,
.tag-suggest-panel,
.more-tabs-dropdown,
.dm-dock-switcher,
.contact-card-more-menu,
.social-role-panel {
backdrop-filter:blur(16px);
}
.toast {
background:linear-gradient(135deg,var(--surface-1),var(--surface-2))!important;
}
.station-name,
.notification-count,
.contact-title,
.user-profile-name strong,
.social-role-title-wrap h3 {
color:var(--text)!important;
}
.station-icon-wrap,
.station-play-badge,
.nav-avatar,
.notification-avatar,
.toast-avatar {
background:var(--accent-a14)!important;
color:var(--accent)!important;
box-shadow:0 0 18px var(--accent-a14);
}
.youtube-btn .station-logo {
color:var(--accent)!important;
filter:drop-shadow(0 0 8px var(--accent-a35))!important;
}
.role-choice-btn.active,
.social-role-badge:hover {
border-color:color-mix(in srgb,var(--role-color, var(--accent)) 62%,var(--soft-line))!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--role-color, var(--accent)) 18%,transparent),var(--surface-2))!important;
}
body[data-theme="sakura"] {
--text:#1f1620;
--muted:#725b6d;
--line:rgba(126,72,100,.18);
--soft-line:rgba(126,72,100,.20);
--soft-glow:color-mix(in srgb,var(--accent) 15%,transparent);
--page-grid:rgba(126,72,100,.07);
}
body[data-theme="sakura"] .hero-title,
body[data-theme="sakura"] .brand,
body[data-theme="sakura"] .contact-title,
body[data-theme="sakura"] .focus-title {
text-shadow:none!important;
}
.tag-suggest-item:hover,
.tag-suggest-item.active,
.dm-dock-switcher-item:hover,
.notification-card:hover,
.notification-group summary:hover,
.notification-leaf .notification-card:hover {
background:var(--accent-a12)!important;
}
.custom-contact-card .user-profile-main {
border-color:color-mix(in srgb,var(--profile-accent) 36%,var(--soft-line))!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 14%,var(--surface-1)),var(--surface-3))!important;
}
.custom-contact-card .user-profile-bio {
border-color:color-mix(in srgb,var(--profile-accent) 28%,var(--soft-line))!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--profile-accent) 12%,var(--surface-1)),var(--surface-2))!important;
}
.user-profile-bio-text {
color:color-mix(in srgb,var(--text) 90%,var(--profile-accent) 10%)!important;
}
.hero-title,
.brand,
.contact-title,
.focus-title,
.music-dock-title,
.dm-dock-title {
text-shadow:0 0 22px var(--soft-glow);
}
.hero,
.global-chat,
.contact-panel,
.persistent-dm-dock,
.persistent-music-dock {
animation:themePanelPulse 6s ease-in-out infinite alternate;
}
body[data-theme="manga"] .hero,
body[data-theme="manga"] .leaderboard-card{
background:
repeating-linear-gradient(135deg, transparent 0 16px, color-mix(in srgb,var(--text) 5%,transparent) 16px 17px, transparent 17px 32px),
linear-gradient(180deg,var(--surface-1),var(--surface-3))!important;
}
@keyframes themeAmbientDrift {
from { transform:translate3d(-1.6%, -1%, 0) scale(1); filter:saturate(1); }
to { transform:translate3d(1.4%, 1%, 0) scale(1.025); filter:saturate(1.18); }
}
@keyframes themePanelPulse {
from { box-shadow:0 20px 58px rgba(0,0,0,.30), 0 0 22px var(--accent-a12), inset 0 1px 0 color-mix(in srgb,var(--text) 7%,transparent); }
to { box-shadow:0 24px 70px rgba(0,0,0,.34), 0 0 42px var(--accent-a22), inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent); }
}
@media (prefers-reduced-motion: reduce) {
body::after,
.hero,
.global-chat,
.contact-panel,
.persistent-dm-dock,
.persistent-music-dock {
animation:none!important;
}
}
/* Theme Engine V2: shape, motion and texture tokens shared by public pages. */
.hero,
.leaderboard-card,
.topbar,
.event-panel,
.global-chat,
.contact-panel,
.likers-panel,
.focus-panel,
.persistent-dm-dock,
.persistent-music-dock,
.tag-suggest-panel,
.more-tabs-dropdown,
.dm-dock-switcher,
.social-role-panel,
.contact-card-more-menu,
.contact-role-admin,
.user-action-panel,
.notifications-panel {
border-radius:var(--theme-radius,22px)!important;
}
.nav-item,
.board-link-btn,
.mode-btn,
.class-btn,
.class-nav-btn,
.contact-tab,
.hero-cta,
.profile-btn,
.like-btn,
.comment-btn,
.comment-like,
.comment-action,
.chat-icon-btn,
.chat-send,
.chat-tool-btn,
.chat-status-btn,
.music-dock-btn,
.dm-dock-btn,
.more-tabs-btn,
.dropdown-item,
.notification-expand,
.station-card-btn,
.role-choice-btn,
.social-role-badge,
.contact-card,
.group-card,
.member-row,
.carousel-item,
.setting-card,
.reply-card,
.notification-card,
.notification-leaf,
.notification-group,
.message-thread,
.dm-dock-thread,
.message-bubble,
.comment-card,
.user-profile-main,
.user-profile-more,
.empty-box,
.reply-compose,
.ban-card {
border-radius:var(--theme-radius-sm,14px)!important;
}
.hero-title,
.brand,
.section-title,
.contact-title,
.focus-title,
.music-dock-title,
.dm-dock-title,
.chat-head strong {
font-family:var(--theme-font-display, Inter, Arial, sans-serif);
letter-spacing:var(--theme-letter-space,0);
}
body::before {
content:"";
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
opacity:calc(var(--theme-glow-strength, .24) + .06);
mix-blend-mode:screen;
}
body.light-theme::before {
mix-blend-mode:multiply;
opacity:.28;
}
body[data-theme="cyberpunk"]::before,
body[data-theme="arcade-neon"]::before {
background:
repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
linear-gradient(90deg, transparent 0 18%, var(--accent-a10) 19%, transparent 20% 58%, var(--accent2-a12) 59%, transparent 60% 100%);
background-size:auto, 180px 100%;
animation:themeCrtScan 6s linear infinite;
}
body[data-theme="cyberpunk"] .hero,
body[data-theme="cyberpunk"] .leaderboard-card,
body[data-theme="cyberpunk"] .global-chat,
body[data-theme="arcade-neon"] .hero,
body[data-theme="arcade-neon"] .leaderboard-card,
body[data-theme="arcade-neon"] .global-chat {
position:relative;
overflow:hidden;
}
body[data-theme="cyberpunk"] .hero::after,
body[data-theme="cyberpunk"] .leaderboard-card::after,
body[data-theme="cyberpunk"] .global-chat::after,
body[data-theme="arcade-neon"] .hero::after,
body[data-theme="arcade-neon"] .leaderboard-card::after,
body[data-theme="arcade-neon"] .global-chat::after {
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(115deg, transparent 0 22%, var(--accent-a16) 23%, transparent 29% 64%, var(--accent2-a12) 65%, transparent 70%),
repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb,var(--accent2) 6%,transparent) 14px 15px, transparent 15px 30px);
opacity:.30;
mix-blend-mode:screen;
animation:themePanelSweep 9s ease-in-out infinite;
}
body[data-theme="cyberpunk"] .hero-title,
body[data-theme="arcade-neon"] .hero-title {
text-shadow:0 0 12px var(--accent-a35), 0 0 22px var(--accent2-a14);
animation:themeNeonTitle 6s ease-in-out infinite;
}
body[data-theme="cyberpunk"] .nav-item:hover,
body[data-theme="cyberpunk"] .profile-btn:hover,
body[data-theme="cyberpunk"] .chat-send:hover,
body[data-theme="arcade-neon"] .nav-item:hover,
body[data-theme="arcade-neon"] .profile-btn:hover,
body[data-theme="arcade-neon"] .chat-send:hover {
transform:translateY(-1px);
text-shadow:0 0 10px color-mix(in srgb,var(--accent) 24%,transparent);
}
body[data-theme="apple-black-glass"] .hero,
body[data-theme="apple-black-glass"] .leaderboard-card,
body[data-theme="apple-black-glass"] .topbar,
body[data-theme="apple-black-glass"] .global-chat,
body[data-theme="apple-black-glass"] .contact-panel,
body[data-theme="apple-black-glass"] .notifications-panel,
body[data-theme="macos"] .hero,
body[data-theme="macos"] .leaderboard-card,
body[data-theme="macos"] .topbar,
body[data-theme="macos"] .global-chat,
body[data-theme="macos"] .contact-panel,
body[data-theme="macos"] .notifications-panel {
backdrop-filter:blur(24px) saturate(1.38);
-webkit-backdrop-filter:blur(24px) saturate(1.38);
background:
linear-gradient(145deg, color-mix(in srgb,var(--text) 10%,transparent), transparent 32%),
linear-gradient(180deg,var(--surface-1),var(--surface-3))!important;
box-shadow:0 28px 90px color-mix(in srgb,var(--bg) 64%,transparent), 0 0 40px var(--soft-glow), inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent)!important;
}
body[data-theme="apple-black-glass"] .nav-item,
body[data-theme="apple-black-glass"] .profile-btn,
body[data-theme="apple-black-glass"] .chat-send,
body[data-theme="macos"] .nav-item,
body[data-theme="macos"] .profile-btn,
body[data-theme="macos"] .chat-send {
position:relative;
overflow:hidden;
}
body[data-theme="apple-black-glass"] .nav-item::before,
body[data-theme="apple-black-glass"] .profile-btn::before,
body[data-theme="apple-black-glass"] .chat-send::before,
body[data-theme="macos"] .nav-item::before,
body[data-theme="macos"] .profile-btn::before,
body[data-theme="macos"] .chat-send::before {
content:"";
position:absolute;
inset:-30% 70% -30% -25%;
pointer-events:none;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
transform:skewX(-18deg);
opacity:.62;
transition:transform .45s ease;
}
body[data-theme="apple-black-glass"] .nav-item:hover::before,
body[data-theme="apple-black-glass"] .profile-btn:hover::before,
body[data-theme="apple-black-glass"] .chat-send:hover::before,
body[data-theme="macos"] .nav-item:hover::before,
body[data-theme="macos"] .profile-btn:hover::before,
body[data-theme="macos"] .chat-send:hover::before {
transform:translateX(230%) skewX(-18deg);
}
body[data-theme="manga"]::before{
background:
radial-gradient(circle at 16px 16px, color-mix(in srgb,var(--text) 18%,transparent) 0 1px, transparent 1px),
repeating-linear-gradient(135deg, transparent 0 16px, color-mix(in srgb,var(--text) 5%,transparent) 16px 17px, transparent 17px 32px);
background-size:18px 18px, auto;
mix-blend-mode:multiply;
opacity:.34;
}
body[data-theme="manga"] .hero,
body[data-theme="manga"] .leaderboard-card,
body[data-theme="manga"] .global-chat,
body[data-theme="manga"] .contact-panel{
border-width:2px!important;
box-shadow:8px 8px 0 color-mix(in srgb,var(--text) 10%,transparent), inset 0 1px 0 color-mix(in srgb,#fff 24%,transparent)!important;
}
body[data-theme="manga"] .hero-title{
text-shadow:2px 2px 0 color-mix(in srgb,var(--accent2) 20%,transparent)!important;
}
body[data-theme="manga"] .nav-item:hover,
body[data-theme="manga"] .profile-btn:hover{
transform:translate(-1px,-2px);
box-shadow:4px 4px 0 color-mix(in srgb,var(--text) 12%,transparent)!important;
}
body[data-theme="sakura"]::before {
background:
radial-gradient(ellipse at 18% 8%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 24%),
radial-gradient(ellipse at 82% 14%, color-mix(in srgb,var(--accent2) 13%,transparent), transparent 22%),
repeating-linear-gradient(140deg, transparent 0 22px, color-mix(in srgb,var(--accent) 7%,transparent) 22px 24px, transparent 24px 46px);
opacity:.46;
mix-blend-mode:multiply;
animation:themePetalAir 9s ease-in-out infinite alternate;
}
body[data-theme="midnight-samurai"]::before {
background:
linear-gradient(122deg, transparent 0 36%, color-mix(in srgb,var(--accent) 18%,transparent) 37%, transparent 40% 62%, color-mix(in srgb,var(--accent2) 12%,transparent) 63%, transparent 67%),
repeating-linear-gradient(90deg, transparent 0 28px, color-mix(in srgb,var(--accent2) 4%,transparent) 28px 29px, transparent 29px 58px);
animation:themeBladeLight 7s ease-in-out infinite;
}
@keyframes themeCrtScan {
from { background-position:0 0, -180px 0; }
to { background-position:0 18px, 180px 0; }
}
@keyframes themePanelSweep {
0%,100% { transform:translateX(-18%); opacity:.36; }
50% { transform:translateX(18%); opacity:.72; }
}
@keyframes themeNeonTitle {
0%,100% { filter:drop-shadow(0 0 4px var(--accent-a28)); }
48% { filter:drop-shadow(0 0 18px var(--accent2-a18)); }
50% { transform:translateX(.8px); }
52% { transform:translateX(-.8px); }
}
@keyframes themePetalAir {
from { transform:translate3d(-1%, -1%, 0); }
to { transform:translate3d(1.5%, 1%, 0); }
}
@keyframes themeBladeLight {
0%,100% { transform:translateX(-8%); opacity:.24; }
50% { transform:translateX(8%); opacity:.62; }
}
@media (prefers-reduced-motion: reduce) {
body::before,
body[data-theme="cyberpunk"] .hero::after,
body[data-theme="cyberpunk"] .leaderboard-card::after,
body[data-theme="cyberpunk"] .global-chat::after,
body[data-theme="arcade-neon"] .hero::after,
body[data-theme="arcade-neon"] .leaderboard-card::after,
body[data-theme="arcade-neon"] .global-chat::after,
body[data-theme="cyberpunk"] .hero-title,
body[data-theme="arcade-neon"] .hero-title {
animation:none!important;
}
}
/* Ultra Theme Packs: every builtin gets a distinct animated screen identity. */
body {
--ultra-aura:
radial-gradient(circle at 12% 12%, var(--accent-a16), transparent 24%),
radial-gradient(circle at 88% 10%, var(--accent2-a18), transparent 24%);
--ultra-texture:
linear-gradient(90deg, color-mix(in srgb,var(--text) 4%,transparent) 1px, transparent 1px),
linear-gradient(color-mix(in srgb,var(--text) 4%,transparent) 1px, transparent 1px);
--ultra-texture-size:42px 42px;
--ultra-frame:inset 0 0 28px var(--accent-a12), inset 0 0 80px color-mix(in srgb,var(--accent2) 8%,transparent);
--ultra-opacity:.48;
--ultra-texture-opacity:.22;
--ultra-edge-opacity:.82;
--ultra-edge:
radial-gradient(ellipse at 0 50%, var(--accent-a28), transparent 18%),
radial-gradient(ellipse at 100% 50%, var(--accent2-a18), transparent 18%),
linear-gradient(180deg, var(--accent-a16), transparent 18%, transparent 82%, var(--accent2-a12));
--ultra-edge-size:100% 100%;
--ultra-motion:themeUltraDrift 11s ease-in-out infinite alternate;
--ultra-frame-motion:themeUltraFramePulse 5.8s ease-in-out infinite;
--ultra-panel-sheen:linear-gradient(125deg, color-mix(in srgb,var(--accent) 7%,transparent), transparent 32%, color-mix(in srgb,var(--accent2) 7%,transparent));
--ultra-title-shadow:0 0 22px var(--soft-glow);
--ultra-button-shadow:0 14px 32px var(--accent-a14), inset 0 1px 0 color-mix(in srgb,var(--text) 12%,transparent);
}
body::before {
background:var(--ultra-aura);
opacity:var(--ultra-opacity);
animation:var(--ultra-motion);
}
body::after {
background:var(--ultra-edge);
background-size:var(--ultra-edge-size);
opacity:var(--ultra-edge-opacity);
box-shadow:var(--ultra-frame);
animation:var(--ultra-frame-motion);
z-index:22000;
mix-blend-mode:screen;
}
body[data-theme]::before {
background:var(--ultra-aura);
opacity:var(--ultra-opacity);
animation:var(--ultra-motion);
}
body[data-theme]::after {
background:var(--ultra-edge);
background-size:var(--ultra-edge-size);
opacity:var(--ultra-edge-opacity);
box-shadow:var(--ultra-frame);
animation:var(--ultra-frame-motion);
z-index:22000;
mix-blend-mode:screen;
}
.hero,
.leaderboard-card,
.topbar,
.global-chat,
.contact-panel,
.notifications-panel,
.likers-panel,
.focus-panel,
.persistent-dm-dock,
.persistent-music-dock {
background:var(--ultra-panel-sheen), linear-gradient(180deg,var(--surface-1),var(--surface-3))!important;
}
.hero-title,
.brand,
.section-title,
.contact-title,
.focus-title {
text-shadow:var(--ultra-title-shadow)!important;
}
.nav-item:hover,
.profile-btn:hover,
.chat-send:hover,
.station-card-btn:hover,
.board-link-btn:hover,
.mode-btn:hover,
.class-btn:hover,
.contact-tab:hover {
box-shadow:var(--ultra-button-shadow)!important;
}
body[data-theme="default"],
body[data-theme="neutral"] {
--ultra-aura:
radial-gradient(circle at 16% 12%, rgba(103,217,255,.16), transparent 26%),
radial-gradient(circle at 84% 10%, rgba(148,124,255,.14), transparent 28%),
linear-gradient(120deg, transparent 0 36%, rgba(103,217,255,.08) 37%, transparent 41% 100%);
--ultra-edge:
radial-gradient(ellipse at 0 45%, rgba(103,217,255,.42), transparent 20%),
radial-gradient(ellipse at 100% 55%, rgba(148,124,255,.34), transparent 20%),
linear-gradient(180deg, rgba(103,217,255,.24), transparent 16%, transparent 84%, rgba(148,124,255,.18));
--ultra-texture:
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
--ultra-frame:inset 0 0 34px rgba(103,217,255,.18), inset 0 0 90px rgba(148,124,255,.10);
--ultra-title-shadow:0 0 20px rgba(103,217,255,.18), 0 0 30px rgba(148,124,255,.12);
}
body[data-theme="dbz"] {
--ultra-aura:
radial-gradient(ellipse at 8% 52%, rgba(255,117,27,.32), transparent 30%),
radial-gradient(ellipse at 92% 42%, rgba(81,214,255,.18), transparent 34%),
radial-gradient(ellipse at 50% 112%, rgba(255,209,77,.30), transparent 34%),
linear-gradient(180deg, transparent 0 58%, rgba(84,18,0,.20) 100%);
--ultra-edge:
radial-gradient(ellipse 10% 18% at 4% 108%, rgba(255,244,155,.78) 0 7%, rgba(255,143,31,.60) 21%, rgba(190,42,0,.28) 45%, transparent 72%),
radial-gradient(ellipse 9% 16% at 12% 111%, rgba(255,226,89,.62) 0 8%, rgba(255,101,22,.46) 24%, rgba(134,30,0,.20) 48%, transparent 74%),
radial-gradient(ellipse 8% 14% at 22% 109%, rgba(255,247,183,.40) 0 7%, rgba(255,128,19,.34) 24%, transparent 66%),
radial-gradient(ellipse 11% 18% at 96% 109%, rgba(255,244,155,.74) 0 7%, rgba(255,132,24,.56) 22%, rgba(184,38,0,.24) 48%, transparent 74%),
radial-gradient(ellipse 8% 15% at 86% 111%, rgba(255,218,73,.50) 0 8%, rgba(255,93,18,.40) 24%, transparent 70%),
radial-gradient(ellipse 9% 14% at 74% 110%, rgba(255,247,183,.34) 0 7%, rgba(255,128,19,.28) 24%, transparent 66%),
radial-gradient(ellipse 32% 6% at 50% 111%, rgba(255,111,24,.42), rgba(160,32,0,.16) 46%, transparent 72%),
radial-gradient(circle at 16% 70%, rgba(255,235,104,.80) 0 2px, transparent 5px),
radial-gradient(circle at 83% 66%, rgba(255,201,61,.74) 0 2px, transparent 5px),
radial-gradient(circle at 50% 78%, rgba(255,143,31,.54) 0 2px, transparent 6px),
linear-gradient(180deg, rgba(255,221,81,.08), transparent 16%, transparent 90%, rgba(255,72,10,.22));
--ultra-edge-opacity:.98;
--ultra-texture:repeating-radial-gradient(circle at 50% 54%, rgba(255,198,48,.13) 0 2px, transparent 2px 18px);
--ultra-frame:inset 0 0 34px rgba(255,232,118,.62), inset 0 0 82px rgba(255,104,28,.46), inset 0 -8px 34px rgba(174,38,0,.20);
--ultra-motion:themeUltraFlame 2.8s ease-in-out infinite alternate;
--ultra-frame-motion:themeUltraTrueFire .9s steps(2,end) infinite alternate;
--ultra-panel-sheen:radial-gradient(circle at top left, rgba(255,123,47,.18), transparent 34%), linear-gradient(125deg, rgba(81,214,255,.08), transparent 42%);
--ultra-title-shadow:0 0 20px rgba(255,123,47,.42), 0 0 36px rgba(81,214,255,.22);
}
body[data-theme="dbz"] .hero-title {
isolation:isolate;
z-index:1;
background:
linear-gradient(180deg, #fff8bd 0%, #ffd84f 25%, #ff8d27 54%, #e23400 76%, #5b0c00 100%),
repeating-linear-gradient(115deg, rgba(255,255,255,.72) 0 3px, rgba(255,207,69,.28) 3px 9px, rgba(255,75,8,.32) 9px 17px);
background-size:100% 100%, 220% 220%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-stroke:1px rgba(255,229,120,.24);
text-shadow:0 0 16px rgba(255,126,24,.42), 0 0 32px rgba(255,64,0,.28), 0 0 48px rgba(255,213,77,.16);
filter:drop-shadow(0 0 18px rgba(255,111,24,.34));
animation:themeDbzTitleFire 1.35s steps(3,end) infinite alternate;
}
body[data-theme="dbz"] .hero-title::before {
content:"";
position:absolute;
inset:-.18em -.08em -.08em;
z-index:-1;
pointer-events:none;
background:
radial-gradient(ellipse at 18% 84%, rgba(255,219,76,.46), transparent 30%),
radial-gradient(ellipse at 54% 88%, rgba(255,89,10,.38), transparent 34%),
radial-gradient(ellipse at 86% 82%, rgba(255,219,76,.34), transparent 28%);
filter:blur(10px) saturate(1.45);
opacity:.72;
animation:themeDbzTitleAura 1.1s ease-in-out infinite alternate;
}
body[data-theme="dbz"] .hero-title::after {
height:4px;
background:linear-gradient(90deg, transparent, #ff4b08, #ffe66d, #ff7a18, transparent);
box-shadow:0 0 18px rgba(255,107,20,.62), 0 0 30px rgba(255,213,77,.28);
}
body[data-theme="naruto"] {
--ultra-aura:
radial-gradient(ellipse at 6% 28%, rgba(255,238,205,.16), transparent 24%),
radial-gradient(ellipse at 96% 74%, rgba(255,142,38,.13), transparent 22%),
linear-gradient(118deg, transparent 0 38%, rgba(255,181,84,.05) 40%, transparent 44% 66%, rgba(91,141,255,.04) 68%, transparent 72%);
--ultra-edge:
radial-gradient(ellipse at 0 46%, rgba(255,238,205,.20), transparent 18%),
radial-gradient(ellipse at 100% 60%, rgba(91,141,255,.13), transparent 18%),
linear-gradient(115deg, transparent 0 45%, rgba(255,181,84,.06) 47%, transparent 51%);
--ultra-texture:linear-gradient(115deg, transparent 0 44%, rgba(255,125,56,.045) 45%, transparent 49%);
--ultra-frame:inset 0 0 24px rgba(255,125,56,.18), inset 0 0 58px rgba(91,141,255,.08);
--ultra-motion:themeUltraSmoke 7s ease-in-out infinite alternate;
--ultra-panel-sheen:linear-gradient(130deg, rgba(255,238,205,.10), transparent 38%, rgba(91,141,255,.06));
--ultra-title-shadow:0 0 12px rgba(255,125,56,.22), 0 0 20px rgba(91,141,255,.10);
}
body[data-theme="naruto"] .hero-title {
background:
linear-gradient(90deg, #fff1a8 0%, #ff8a2f 28%, #ffb554 48%, #5b8cff 76%, #fff1a8 100%);
background-size:260% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-stroke:1px rgba(255,181,84,.12);
text-shadow:0 0 12px rgba(255,125,56,.30), 0 0 24px rgba(91,141,255,.14), 0 0 34px rgba(255,181,84,.08);
filter:drop-shadow(0 0 14px rgba(255,125,56,.22));
}
body[data-theme="naruto"] .hero-title::after {
background:linear-gradient(90deg, transparent, #ff7d38, #ffdd64, #5b8cff, transparent);
box-shadow:0 0 12px rgba(255,125,56,.34), 0 0 22px rgba(91,141,255,.16);
}
body[data-theme="tokyo-ghoul"] {
--ultra-aura:
radial-gradient(ellipse at 12% 18%, rgba(255,36,72,.28), transparent 28%),
radial-gradient(ellipse at 92% 82%, rgba(255,36,72,.18), transparent 24%),
linear-gradient(135deg, transparent 0 46%, rgba(255,36,72,.12) 48%, transparent 52%),
linear-gradient(180deg, transparent 0 76%, rgba(0,0,0,.42));
--ultra-edge:
radial-gradient(ellipse at 0 46%, rgba(255,36,72,.62), transparent 21%),
radial-gradient(ellipse at 100% 52%, rgba(255,36,72,.52), transparent 20%),
linear-gradient(180deg, rgba(255,36,72,.22), transparent 18%, transparent 78%, rgba(0,0,0,.56));
--ultra-texture:repeating-linear-gradient(154deg, transparent 0 20px, rgba(255,36,72,.09) 20px 22px, transparent 22px 44px);
--ultra-frame:inset 0 0 42px rgba(255,36,72,.46), inset 0 0 108px rgba(0,0,0,.52);
--ultra-motion:themeUltraSmoke 7s ease-in-out infinite alternate;
--ultra-panel-sheen:radial-gradient(circle at 100% 0, rgba(255,36,72,.20), transparent 28%), linear-gradient(145deg, rgba(255,255,255,.035), transparent 40%, rgba(255,36,72,.07));
--ultra-title-shadow:0 0 18px rgba(255,36,72,.42), 0 0 36px rgba(0,0,0,.52);
}
body[data-theme="tokyo-ghoul"] .hero-title {
background:linear-gradient(90deg, #fff5f7 0%, #ff3158 32%, #b6002a 50%, #fff5f7 72%, #ff3158 100%);
background-size:220% 100%;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-shadow:0 0 14px rgba(255,36,72,.38), 0 0 32px rgba(0,0,0,.70);
filter:drop-shadow(0 0 18px rgba(255,36,72,.28));
}
body[data-theme="tokyo-ghoul"] .hero-title::after {
background:linear-gradient(90deg, transparent, #ff2448, #fff5f7, #7b001b, transparent);
box-shadow:0 0 16px rgba(255,36,72,.46), 0 0 30px rgba(0,0,0,.42);
}
body[data-theme="manga"]{
--ultra-aura:
radial-gradient(circle at 12px 12px, color-mix(in srgb,var(--text) 20%,transparent) 0 1px, transparent 1px),
linear-gradient(122deg, transparent 0 42%, color-mix(in srgb,var(--accent2) 11%,transparent) 43%, transparent 46%),
linear-gradient(90deg, color-mix(in srgb,var(--text) 10%,transparent), transparent 12%, transparent 88%, color-mix(in srgb,var(--text) 10%,transparent));
--ultra-edge:
repeating-linear-gradient(90deg, color-mix(in srgb,var(--text) 28%,transparent) 0 2px, transparent 2px 18px, transparent 18px 36px),
linear-gradient(90deg, color-mix(in srgb,var(--text) 30%,transparent), transparent 8%, transparent 92%, color-mix(in srgb,var(--text) 30%,transparent)),
linear-gradient(180deg, transparent 0 80%, color-mix(in srgb,var(--text) 22%,transparent));
--ultra-edge-opacity:.70;
--ultra-texture:
repeating-radial-gradient(circle at 18px 18px, color-mix(in srgb,var(--text) 18%,transparent) 0 1px, transparent 1px 9px),
repeating-linear-gradient(135deg, transparent 0 15px, color-mix(in srgb,var(--text) 5%,transparent) 15px 16px, transparent 16px 30px);
--ultra-texture-size:28px 28px, auto;
--ultra-frame:inset 0 0 0 2px color-mix(in srgb,var(--text) 22%,transparent), inset 0 0 42px color-mix(in srgb,var(--text) 8%,transparent), inset 0 -22px 44px color-mix(in srgb,var(--accent2) 9%,transparent);
--ultra-motion:themeUltraMangaPage 5.8s steps(2,end) infinite;
--ultra-frame-motion:themeUltraMangaFrame 3.8s steps(2,end) infinite;
--ultra-texture-opacity:.38;
--ultra-panel-sheen:
repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in srgb,var(--text) 5%,transparent) 13px 14px, transparent 14px 28px),
radial-gradient(circle at 100% 0, color-mix(in srgb,var(--accent2) 10%,transparent), transparent 32%);
--ultra-title-shadow:3px 3px 0 color-mix(in srgb,var(--text) 34%,transparent), 6px 6px 0 color-mix(in srgb,var(--accent2) 15%,transparent);
}
body[data-theme="manga"] {
--ultra-edge-opacity:.78;
--ultra-texture-opacity:.43;
--ultra-button-shadow:4px 4px 0 color-mix(in srgb,var(--text) 18%,transparent), inset 0 1px 0 color-mix(in srgb,#fff 38%,transparent);
}
body[data-theme="manga"] .hero-title,
body[data-theme="manga"] .brand,
body[data-theme="manga"] .section-title,
body[data-theme="manga"] .contact-title,
body[data-theme="manga"] .focus-title {
overflow-wrap:normal;
word-break:normal;
hyphens:none;
background:linear-gradient(180deg,#ffffff 0%,#f2f0e7 44%,#d9d6cc 100%)!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
-webkit-text-stroke:1px color-mix(in srgb,var(--text) 78%,transparent);
text-shadow:3px 3px 0 color-mix(in srgb,var(--text) 34%,transparent),6px 6px 0 color-mix(in srgb,var(--accent2) 20%,transparent)!important;
filter:drop-shadow(0 8px 0 color-mix(in srgb,var(--text) 8%,transparent));
}
body[data-theme="manga"] .hero-title::after{
background:linear-gradient(90deg,transparent,var(--text),var(--accent2),var(--text),transparent);
box-shadow:4px 4px 0 color-mix(in srgb,var(--text) 12%,transparent);
}
body[data-theme="manga"] .hero,
body[data-theme="manga"] .leaderboard-card,
body[data-theme="manga"] .global-chat,
body[data-theme="manga"] .contact-panel,
body[data-theme="manga"] .notifications-panel,
body[data-theme="manga"] .focus-panel {
border-width:2px!important;
border-color:color-mix(in srgb,var(--text) 24%,transparent)!important;
box-shadow:8px 8px 0 color-mix(in srgb,var(--text) 13%,transparent), inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent)!important;
}
body[data-theme="manga"] .nav-item,
body[data-theme="manga"] .profile-btn,
body[data-theme="manga"] .chat-send,
body[data-theme="manga"] .board-link-btn,
body[data-theme="manga"] .mode-btn,
body[data-theme="manga"] .class-btn,
body[data-theme="manga"] .contact-tab {
border-width:2px!important;
border-color:color-mix(in srgb,var(--text) 22%,transparent)!important;
}
@media (max-width: 640px) {
body[data-theme="manga"] .hero-title{
font-size:clamp(1.72rem,8.15vw,2.25rem);
line-height:1.03;
}
}
body[data-theme="bleach"] {
--ultra-aura:
linear-gradient(90deg, rgba(247,251,255,.08), transparent 10%, transparent 90%, rgba(92,233,255,.08)),
linear-gradient(180deg, transparent 0 78%, rgba(92,233,255,.10)),
radial-gradient(circle at 88% 12%, rgba(92,233,255,.16), transparent 27%);
--ultra-edge:
radial-gradient(ellipse at 0 52%, rgba(247,251,255,.18), transparent 20%),
radial-gradient(ellipse at 100% 48%, rgba(92,233,255,.22), transparent 19%);
--ultra-texture:repeating-linear-gradient(90deg, transparent 0 28px, rgba(247,251,255,.045) 28px 29px, transparent 29px 58px);
--ultra-frame:inset 0 0 26px rgba(247,251,255,.12), inset 0 0 66px rgba(92,233,255,.10);
--ultra-motion:themeUltraReiatsu 8s ease-in-out infinite;
--ultra-panel-sheen:linear-gradient(115deg, rgba(247,251,255,.07), transparent 34%, rgba(92,233,255,.08));
--ultra-title-shadow:0 0 16px rgba(92,233,255,.22), 0 0 30px rgba(247,251,255,.08);
}
body[data-theme="bleach"] .hero,
body[data-theme="bleach"] .leaderboard-card,
body[data-theme="bleach"] .global-chat,
body[data-theme="bleach"] .contact-panel,
body[data-theme="bleach"] .notifications-panel,
body[data-theme="bleach"] .focus-panel {
border-radius:10px!important;
border-color:rgba(218,236,255,.16)!important;
background:
linear-gradient(180deg, rgba(14,19,30,.96), rgba(5,8,14,.985))!important;
box-shadow:
0 24px 72px rgba(0,0,0,.48),
0 0 26px rgba(92,233,255,.10),
inset 0 1px 0 rgba(247,251,255,.12)!important;
}
body[data-theme="bleach"] .hero-title {
background:linear-gradient(90deg,#f7fbff 0%,#bfefff 32%,#5ce9ff 50%,#f7fbff 68%,#d7e4ff 100%)!important;
background-size:240% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
text-shadow:0 0 16px rgba(92,233,255,.24),0 0 34px rgba(247,251,255,.08)!important;
filter:drop-shadow(0 0 14px rgba(92,233,255,.18))!important;
}
body[data-theme="bleach"] .hero-title::after {
height:2px;
background:linear-gradient(90deg,transparent,#f7fbff,#5ce9ff,transparent)!important;
box-shadow:0 0 14px rgba(92,233,255,.34);
}
body[data-theme="bleach"] .nav-item,
body[data-theme="bleach"] .profile-btn,
body[data-theme="bleach"] .chat-send,
body[data-theme="bleach"] .board-link-btn,
body[data-theme="bleach"] .mode-btn,
body[data-theme="bleach"] .class-btn,
body[data-theme="bleach"] .contact-tab {
border-radius:8px!important;
border-color:rgba(218,236,255,.18)!important;
background-image:linear-gradient(112deg, transparent 0 42%, rgba(247,251,255,.06) 43%, rgba(92,233,255,.08) 46%, transparent 50%)!important;
}
body[data-theme="bleach"] .nav-item:hover,
body[data-theme="bleach"] .profile-btn:hover,
body[data-theme="bleach"] .chat-send:hover,
body[data-theme="bleach"] .board-link-btn:hover,
body[data-theme="bleach"] .mode-btn:hover,
body[data-theme="bleach"] .class-btn:hover,
body[data-theme="bleach"] .contact-tab:hover {
border-color:rgba(92,233,255,.36)!important;
box-shadow:0 0 20px rgba(92,233,255,.16), inset 0 1px 0 rgba(247,251,255,.14)!important;
}
body[data-theme="one-piece"] {
--ultra-aura:
radial-gradient(circle at 10% 88%, rgba(241,189,73,.22), transparent 28%),
radial-gradient(circle at 90% 18%, rgba(59,172,255,.20), transparent 26%),
repeating-linear-gradient(0deg, transparent 0 18px, rgba(59,172,255,.06) 18px 20px, transparent 20px 42px);
--ultra-edge:
radial-gradient(ellipse at 0 60%, rgba(192,56,43,.44), transparent 21%),
radial-gradient(ellipse at 100% 42%, rgba(59,172,255,.34), transparent 20%),
radial-gradient(ellipse at 50% 100%, rgba(241,189,73,.38), transparent 18%);
--ultra-texture:repeating-linear-gradient(18deg, rgba(241,189,73,.055) 0 1px, transparent 1px 18px);
--ultra-frame:inset 0 0 36px rgba(192,56,43,.34), inset 0 0 80px rgba(59,172,255,.14);
--ultra-motion:themeUltraSea 8s ease-in-out infinite;
--ultra-panel-sheen:radial-gradient(circle at top right, rgba(241,189,73,.16), transparent 36%), linear-gradient(145deg, rgba(59,172,255,.08), transparent 40%);
--ultra-title-shadow:0 0 20px rgba(241,189,73,.26), 0 0 30px rgba(59,172,255,.16);
}
body[data-theme="jujutsu-kaisen"] {
--ultra-aura:
radial-gradient(circle at 16% 16%, rgba(142,111,255,.28), transparent 30%),
radial-gradient(circle at 88% 24%, rgba(89,238,255,.20), transparent 28%),
repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 18deg, rgba(142,111,255,.08) 19deg 21deg, transparent 22deg 36deg);
--ultra-edge:
radial-gradient(ellipse at 0 50%, rgba(142,111,255,.54), transparent 22%),
radial-gradient(ellipse at 100% 50%, rgba(89,238,255,.34), transparent 20%),
repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 24deg, rgba(142,111,255,.12) 25deg 27deg, transparent 28deg 48deg);
--ultra-texture:repeating-linear-gradient(135deg, transparent 0 20px, rgba(142,111,255,.08) 20px 21px, transparent 21px 42px);
--ultra-frame:inset 0 0 42px rgba(142,111,255,.38), inset 0 0 96px rgba(89,238,255,.16);
--ultra-motion:themeUltraCurse 5.2s ease-in-out infinite;
--ultra-panel-sheen:radial-gradient(circle at 0 0, rgba(142,111,255,.18), transparent 34%), linear-gradient(135deg, rgba(89,238,255,.08), transparent 44%);
--ultra-title-shadow:0 0 20px rgba(142,111,255,.38), 0 0 34px rgba(89,238,255,.18);
}
body[data-theme="akatsuki"] {
--ultra-aura:
radial-gradient(circle at 86% 14%, rgba(227,16,16,.20) 0 3%, rgba(0,0,0,.42) 4% 7%, rgba(227,16,16,.12) 8% 13%, transparent 17%),
radial-gradient(ellipse at 12% 18%, rgba(227,16,16,.24), transparent 28%),
repeating-linear-gradient(150deg, transparent 0 30px, rgba(227,16,16,.055) 30px 33px, transparent 33px 62px);
--ultra-edge:
radial-gradient(ellipse at 0 50%, rgba(227,16,16,.34), transparent 21%),
radial-gradient(ellipse at 100% 50%, rgba(227,16,16,.25), transparent 20%),
linear-gradient(180deg, rgba(227,16,16,.10), transparent 18%, transparent 82%, rgba(0,0,0,.44));
--ultra-texture:
radial-gradient(ellipse at 18% 82%, rgba(227,16,16,.16), transparent 10%),
radial-gradient(ellipse at 72% 20%, rgba(227,16,16,.12), transparent 9%),
repeating-linear-gradient(90deg, transparent 0 42px, rgba(244,241,237,.025) 42px 43px, transparent 43px 86px);
--ultra-frame:inset 0 0 36px rgba(227,16,16,.30), inset 0 0 86px rgba(0,0,0,.50);
--ultra-motion:themeUltraAkatsuki 10s ease-in-out infinite alternate;
--ultra-panel-sheen:linear-gradient(140deg, rgba(227,16,16,.11), transparent 42%, rgba(244,241,237,.035));
--ultra-title-shadow:0 0 22px rgba(227,16,16,.38), 0 0 34px rgba(0,0,0,.44);
}
body[data-theme="akatsuki"] .hero,
body[data-theme="akatsuki"] .leaderboard-card,
body[data-theme="akatsuki"] .global-chat,
body[data-theme="akatsuki"] .contact-panel,
body[data-theme="akatsuki"] .notifications-panel,
body[data-theme="akatsuki"] .focus-panel {
border-radius:14px!important;
border-color:rgba(227,16,16,.20)!important;
background:linear-gradient(180deg,rgba(17,8,9,.96),rgba(6,3,4,.985))!important;
box-shadow:0 24px 72px rgba(0,0,0,.52),0 0 28px rgba(227,16,16,.13),inset 0 1px 0 rgba(244,241,237,.06)!important;
}
body[data-theme="akatsuki"] .hero-title {
background:linear-gradient(90deg,#fff4f4 0%,#e31010 34%,#fff4f4 52%,#8f0505 75%,#fff4f4 100%)!important;
background-size:240% 100%!important;
-webkit-background-clip:text!important;
background-clip:text!important;
color:transparent!important;
text-shadow:0 0 18px rgba(227,16,16,.34),0 0 34px rgba(0,0,0,.54)!important;
}
body[data-theme="akatsuki"] .hero-title::after {
height:2px;
background:linear-gradient(90deg,transparent,#e31010,#fff4f4,#e31010,transparent)!important;
box-shadow:0 0 16px rgba(227,16,16,.40);
}
body[data-theme="akatsuki"] .nav-item,
body[data-theme="akatsuki"] .profile-btn,
body[data-theme="akatsuki"] .chat-send,
body[data-theme="akatsuki"] .board-link-btn,
body[data-theme="akatsuki"] .mode-btn,
body[data-theme="akatsuki"] .class-btn,
body[data-theme="akatsuki"] .contact-tab {
border-radius:10px!important;
border-color:rgba(227,16,16,.22)!important;
background-image:
radial-gradient(ellipse at 18% 80%, rgba(227,16,16,.12), transparent 28%),
linear-gradient(140deg, transparent 0 44%, rgba(227,16,16,.08) 45%, transparent 51%)!important;
}
body[data-theme="playstation"] {
--ultra-aura:
radial-gradient(circle at 16% 12%, rgba(33,71,255,.22), transparent 26%),
radial-gradient(circle at 86% 18%, rgba(0,191,255,.20), transparent 28%),
linear-gradient(115deg, transparent 0 38%, rgba(0,191,255,.08) 39%, transparent 45%);
--ultra-edge:
radial-gradient(ellipse at 0 45%, rgba(33,71,255,.48), transparent 20%),
radial-gradient(ellipse at 100% 55%, rgba(0,191,255,.38), transparent 20%),
linear-gradient(180deg, rgba(33,71,255,.10), transparent 18%, transparent 82%, rgba(0,191,255,.10));
--ultra-texture:
linear-gradient(90deg, rgba(0,191,255,.07) 1px, transparent 1px),
linear-gradient(rgba(33,71,255,.06) 1px, transparent 1px);
--ultra-frame:inset 0 0 36px rgba(33,71,255,.36), inset 0 0 86px rgba(0,191,255,.16);
--ultra-motion:themeUltraPlaystationWave 8s ease-in-out infinite alternate;
--ultra-panel-sheen:linear-gradient(135deg, rgba(33,71,255,.14), transparent 42%, rgba(0,191,255,.10));
--ultra-title-shadow:0 0 20px rgba(33,71,255,.30), 0 0 34px rgba(0,191,255,.18);
}
body[data-theme="xbox"] {
--ultra-aura:
radial-gradient(circle at 16% 14%, rgba(16,124,16,.20), transparent 28%),
radial-gradient(circle at 86% 14%, rgba(68,214,91,.12), transparent 26%),
repeating-linear-gradient(90deg, transparent 0 34px, rgba(68,214,91,.045) 34px 36px, transparent 36px 70px);
--ultra-edge:
radial-gradient(ellipse at 0 50%, rgba(16,124,16,.32), transparent 22%),
radial-gradient(ellipse at 100% 50%, rgba(68,214,91,.22), transparent 20%),
repeating-linear-gradient(90deg, transparent 0 38px, rgba(68,214,91,.07) 38px 40px, transparent 40px 76px);
--ultra-texture:
linear-gradient(90deg, rgba(68,214,91,.045) 1px, transparent 1px),
linear-gradient(rgba(68,214,91,.035) 1px, transparent 1px);
--ultra-frame:inset 0 0 30px rgba(16,124,16,.26), inset 0 0 66px rgba(68,214,91,.08);
--ultra-motion:themeUltraSignal 6.2s ease-in-out infinite;
--ultra-panel-sheen:linear-gradient(135deg, rgba(16,124,16,.12), transparent 40%, rgba(68,214,91,.06));
--ultra-title-shadow:0 0 16px rgba(68,214,91,.18);
}
body[data-theme="microsoft"] {
--ultra-aura:
linear-gradient(135deg, rgba(15,108,189,.09), transparent 28%),
radial-gradient(circle at 84% 12%, rgba(54,163,255,.10), transparent 26%),
linear-gradient(90deg, rgba(15,108,189,.035) 25%, transparent 25% 50%, rgba(54,163,255,.038) 50% 75%, transparent 75%);
--ultra-edge:
linear-gradient(90deg, rgba(15,108,189,.18), transparent 13%, transparent 87%, rgba(54,163,255,.16)),
linear-gradient(180deg, rgba(15,108,189,.10), transparent 16%, transparent 84%, rgba(54,163,255,.09));
--ultra-texture:
linear-gradient(90deg, rgba(19,33,47,.055) 1px, transparent 1px),
linear-gradient(rgba(19,33,47,.045) 1px, transparent 1px);
--ultra-frame:inset 0 0 22px rgba(15,108,189,.10), inset 0 0 56px rgba(54,163,255,.06);
--ultra-motion:themeUltraTiles 10s ease-in-out infinite;
--ultra-panel-sheen:linear-gradient(135deg, rgba(15,108,189,.06), transparent 42%, rgba(54,163,255,.05));
--ultra-title-shadow:0 0 12px rgba(15,108,189,.12);
}
body[data-theme="macos"],
body[data-theme="apple-black-glass"] {
--ultra-aura:
radial-gradient(circle at 18% 8%, rgba(255,255,255,.18), transparent 24%),
radial-gradient(circle at 86% 10%, rgba(135,168,255,.22), transparent 28%),
linear-gradient(120deg, transparent 0 32%, rgba(255,255,255,.09) 33%, transparent 38% 100%);
--ultra-edge:
linear-gradient(90deg, rgba(255,255,255,.22), transparent 16%, transparent 84%, rgba(135,168,255,.28)),
linear-gradient(180deg, rgba(255,255,255,.20), transparent 16%, transparent 84%, rgba(135,168,255,.18)),
linear-gradient(120deg, transparent 0 34%, rgba(255,255,255,.16) 35%, transparent 40%);
--ultra-texture:linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.08) 39%, transparent 44%);
--ultra-frame:inset 0 0 36px rgba(255,255,255,.20), inset 0 0 96px rgba(135,168,255,.16);
--ultra-motion:themeUltraGlass 7s ease-in-out infinite alternate;
--ultra-panel-sheen:linear-gradient(145deg, rgba(255,255,255,.14), transparent 30%, rgba(135,168,255,.08));
--ultra-title-shadow:0 0 24px rgba(255,255,255,.12), 0 0 34px rgba(135,168,255,.16);
}
body[data-theme="windows"] {
--ultra-aura:
linear-gradient(90deg, rgba(0,188,242,.10) 1px, transparent 1px),
linear-gradient(rgba(90,200,255,.08) 1px, transparent 1px),
radial-gradient(circle at 82% 14%, rgba(0,188,242,.22), transparent 26%);
--ultra-edge:
linear-gradient(90deg, rgba(0,188,242,.36), transparent 12%, transparent 88%, rgba(90,200,255,.30)),
linear-gradient(180deg, rgba(0,188,242,.22), transparent 16%, transparent 84%, rgba(90,200,255,.18));
--ultra-texture-size:36px 36px, 36px 36px, auto;
--ultra-frame:inset 0 0 34px rgba(0,188,242,.34), inset 0 0 80px rgba(90,200,255,.12);
--ultra-motion:themeUltraWindow 6s ease-in-out infinite;
--ultra-panel-sheen:linear-gradient(90deg, rgba(0,188,242,.12), transparent 40%, rgba(90,200,255,.08));
--ultra-title-shadow:0 0 22px rgba(0,188,242,.28);
}
body[data-theme="discord-dark"] {
--ultra-aura:none;
--ultra-edge:none;
--ultra-edge-opacity:0;
--ultra-texture:none;
--ultra-frame:none;
--ultra-motion:none;
--ultra-panel-sheen:none;
--ultra-title-shadow:none;
}
body[data-theme="steam"] {
--ultra-aura:
radial-gradient(circle at 14% 14%, rgba(102,192,244,.20), transparent 28%),
radial-gradient(circle at 84% 76%, rgba(168,228,255,.12), transparent 26%),
linear-gradient(160deg, transparent 0 40%, rgba(102,192,244,.08) 41%, transparent 46%);
--ultra-edge:
radial-gradient(ellipse at 0 48%, rgba(102,192,244,.40), transparent 22%),
radial-gradient(ellipse at 100% 58%, rgba(168,228,255,.24), transparent 18%),
linear-gradient(160deg, transparent 0 40%, rgba(102,192,244,.16) 41%, transparent 46%);
--ultra-texture:repeating-linear-gradient(180deg, transparent 0 28px, rgba(102,192,244,.055) 28px 30px, transparent 30px 56px);
--ultra-frame:inset 0 0 34px rgba(102,192,244,.30), inset 0 0 92px rgba(10,19,29,.60);
--ultra-motion:themeUltraSteam 9s ease-in-out infinite alternate;
--ultra-panel-sheen:radial-gradient(circle at 100% 0, rgba(102,192,244,.14), transparent 34%), linear-gradient(145deg, rgba(168,228,255,.06), transparent 42%);
--ultra-title-shadow:0 0 22px rgba(102,192,244,.26);
}
body[data-theme="anime-night"] {
--ultra-aura:none;
--ultra-edge:none;
--ultra-edge-opacity:0;
--ultra-texture:none;
--ultra-frame:none;
--ultra-motion:none;
--ultra-panel-sheen:none;
--ultra-title-shadow:none;
}
body[data-theme="cyberpunk"] {
--ultra-aura:
repeating-linear-gradient(0deg, rgba(255,255,255,.026) 0 1px, transparent 1px 5px),
radial-gradient(circle at 18% 12%, rgba(255,230,56,.12), transparent 28%),
radial-gradient(circle at 86% 18%, rgba(34,247,255,.10), transparent 28%);
--ultra-edge:
linear-gradient(90deg, rgba(255,230,56,.28), transparent 14%, transparent 86%, rgba(34,247,255,.22)),
linear-gradient(180deg, rgba(255,230,56,.14), transparent 18%, transparent 82%, rgba(34,247,255,.11)),
repeating-linear-gradient(0deg, rgba(255,255,255,.034) 0 1px, transparent 1px 5px);
--ultra-texture:
linear-gradient(90deg, rgba(255,230,56,.08) 1px, transparent 1px),
linear-gradient(rgba(34,247,255,.065) 1px, transparent 1px);
--ultra-texture-size:38px 38px;
--ultra-frame:inset 0 0 32px rgba(255,230,56,.22), inset 0 0 72px rgba(34,247,255,.12);
--ultra-motion:themeCrtScan 9s linear infinite;
--ultra-panel-sheen:linear-gradient(115deg, rgba(255,230,56,.075), transparent 30%, transparent 68%, rgba(34,247,255,.075));
--ultra-title-shadow:0 0 16px rgba(255,230,56,.24), 0 0 28px rgba(34,247,255,.14);
}
body[data-theme="arcade-neon"] {
--ultra-aura:
repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 5px),
radial-gradient(circle at 18% 14%, rgba(57,255,136,.12), transparent 28%),
radial-gradient(circle at 86% 16%, rgba(255,79,216,.10), transparent 28%);
--ultra-edge:
linear-gradient(90deg, rgba(57,255,136,.28), transparent 14%, transparent 86%, rgba(255,79,216,.22)),
linear-gradient(180deg, rgba(57,255,136,.12), transparent 18%, transparent 82%, rgba(255,79,216,.11)),
repeating-linear-gradient(0deg, rgba(255,255,255,.032) 0 1px, transparent 1px 5px);
--ultra-texture:
linear-gradient(90deg, rgba(57,255,136,.08) 1px, transparent 1px),
linear-gradient(rgba(255,79,216,.06) 1px, transparent 1px);
--ultra-texture-size:32px 32px;
--ultra-frame:inset 0 0 32px rgba(57,255,136,.20), inset 0 0 72px rgba(255,79,216,.12);
--ultra-motion:themeCrtScan 8s linear infinite;
--ultra-panel-sheen:linear-gradient(115deg, rgba(57,255,136,.075), transparent 34%, rgba(255,79,216,.065));
--ultra-title-shadow:0 0 16px rgba(57,255,136,.22), 0 0 28px rgba(255,79,216,.14);
}
body[data-theme="sakura"] {
--ultra-aura:
radial-gradient(ellipse at 18% 8%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 24%),
radial-gradient(ellipse at 82% 14%, color-mix(in srgb,var(--accent2) 8%,transparent), transparent 22%),
repeating-linear-gradient(140deg, transparent 0 32px, color-mix(in srgb,var(--accent) 4%,transparent) 32px 34px, transparent 34px 68px);
--ultra-edge:
radial-gradient(ellipse at 0 42%, rgba(217,54,127,.16), transparent 20%),
radial-gradient(ellipse at 100% 58%, rgba(111,125,255,.13), transparent 19%),
repeating-linear-gradient(140deg, transparent 0 32px, rgba(217,54,127,.055) 32px 35px, transparent 35px 72px);
--ultra-frame:inset 0 0 24px rgba(217,54,127,.13), inset 0 0 58px rgba(111,125,255,.07);
--ultra-motion:themePetalAir 14s ease-in-out infinite alternate;
--ultra-panel-sheen:radial-gradient(circle at top left, rgba(217,54,127,.065), transparent 34%), linear-gradient(135deg, rgba(111,125,255,.045), transparent 42%);
--ultra-title-shadow:0 0 14px rgba(217,54,127,.14);
}
body[data-theme="midnight-samurai"] {
--ultra-aura:
linear-gradient(122deg, transparent 0 38%, color-mix(in srgb,var(--accent) 6%,transparent) 39%, transparent 42% 64%, color-mix(in srgb,var(--accent2) 4%,transparent) 65%, transparent 69%),
repeating-linear-gradient(90deg, transparent 0 34px, color-mix(in srgb,var(--accent2) 2%,transparent) 34px 35px, transparent 35px 70px);
--ultra-edge:
linear-gradient(122deg, transparent 0 36%, rgba(255,71,87,.14) 37%, transparent 42% 64%, rgba(247,201,107,.08) 65%, transparent 69%),
radial-gradient(ellipse at 0 50%, rgba(255,71,87,.14), transparent 20%),
radial-gradient(ellipse at 100% 50%, rgba(247,201,107,.10), transparent 18%);
--ultra-frame:inset 0 0 24px rgba(255,71,87,.13), inset 0 0 58px rgba(247,201,107,.06);
--ultra-motion:themeBladeLight 10s ease-in-out infinite;
--ultra-panel-sheen:linear-gradient(135deg, rgba(255,71,87,.055), transparent 34%, rgba(247,201,107,.045));
--ultra-title-shadow:0 0 14px rgba(255,71,87,.16), 0 0 22px rgba(247,201,107,.08);
}
@keyframes themeUltraDrift { from { transform:translate3d(-1%,-1%,0) scale(1); } to { transform:translate3d(1.2%,1%,0) scale(1.02); } }
@keyframes themeUltraFramePulse { 0%,100% { filter:saturate(1) brightness(.98); } 50% { filter:saturate(1.22) brightness(1.12); } }
@keyframes themeUltraFlame { from { transform:translateY(1%) scale(1); filter:hue-rotate(-6deg) saturate(1.05); } to { transform:translateY(-1%) scale(1.025); filter:hue-rotate(8deg) saturate(1.28); } }
@keyframes themeUltraTrueFire { 0% { background-position:0 0; filter:blur(2.5px) saturate(1.45) contrast(1.16) brightness(1.02); } 50% { background-position:-10px -18px, 8px -24px, -6px -12px, 11px -20px, -9px -16px, 7px -12px, 0 -10px, 0 -18px, 0 -24px, 0 -14px, 0 0; filter:blur(3.8px) saturate(1.82) contrast(1.28) brightness(1.12); } 100% { background-position:7px -26px, -9px -14px, 10px -20px, -8px -28px, 9px -12px, -6px -18px, 0 -16px, 0 -34px, 0 -28px, 0 -22px, 0 0; filter:blur(2.8px) saturate(1.58) contrast(1.20) brightness(1.06); } }
@keyframes themeDbzTitleFire { 0% { background-position:0 0, 0 0; filter:drop-shadow(0 0 14px rgba(255,111,24,.30)); } 50% { background-position:0 0, 42% 58%; filter:drop-shadow(0 0 22px rgba(255,111,24,.46)); } 100% { background-position:0 0, 86% 18%; filter:drop-shadow(0 0 17px rgba(255,213,77,.34)); } }
@keyframes themeDbzTitleAura { from { transform:translateY(2px) scale(.98); opacity:.54; } to { transform:translateY(-3px) scale(1.02); opacity:.84; } }
@keyframes themeUltraSmoke { from { transform:translate3d(-1.5%,0,0) scale(1.01); filter:blur(0); } to { transform:translate3d(1.5%,-1%,0) scale(1.04); filter:blur(.4px); } }
@keyframes themeUltraInk { 0%,100% { transform:translate(0,0); } 50% { transform:translate(1px,-1px); } }
@keyframes themeUltraMangaPage { 0%,100% { transform:translate(0,0); filter:contrast(1); } 50% { transform:translate(1px,-1px); filter:contrast(1.08); } }
@keyframes themeUltraMangaFrame { 0%,100% { background-position:0 0, 0 0, 0 0; filter:contrast(1.02); } 50% { background-position:8px 0, -4px 0, 0 -6px; filter:contrast(1.14); } }
@keyframes themeUltraBlade { 0%,100% { transform:translateX(-5%); opacity:.18; } 50% { transform:translateX(5%); opacity:.36; } }
@keyframes themeUltraReiatsu { 0%,100% { transform:translate3d(-1.2%,.4%,0); opacity:.24; filter:blur(.1px); } 50% { transform:translate3d(1.2%,-.5%,0); opacity:.38; filter:blur(.35px); } }
@keyframes themeUltraSea { 0%,100% { transform:translate3d(-1%,.7%,0); } 50% { transform:translate3d(1%,-.7%,0); } }
@keyframes themeUltraCurse { 0%,100% { transform:scale(1) rotate(0deg); filter:hue-rotate(0deg); } 50% { transform:scale(1.018) rotate(.25deg); filter:hue-rotate(12deg); } }
@keyframes themeUltraCloud { from { transform:translateX(-2%) scale(1.01); } to { transform:translateX(2%) scale(1.035); } }
@keyframes themeUltraAkatsuki { 0%,100% { transform:translate3d(-1%,.3%,0) scale(1.01); opacity:.28; } 50% { transform:translate3d(1%,-.3%,0) scale(1.025); opacity:.42; } }
@keyframes themeUltraOrbit { 0%,100% { transform:translateY(-1%) rotate(0deg); } 50% { transform:translateY(1%) rotate(.5deg); } }
@keyframes themeUltraPlaystationWave { 0%,100% { transform:translate3d(-1%,.2%,0); opacity:.26; } 50% { transform:translate3d(1%,-.2%,0); opacity:.38; } }
@keyframes themeUltraSignal { 0%,100% { opacity:.28; transform:scale(1); } 50% { opacity:.48; transform:scale(1.018); } }
@keyframes themeUltraTiles { 0%,100% { background-position:0 0; } 50% { background-position:18px 12px; } }
@keyframes themeUltraGlass { from { transform:translateX(-1%); filter:saturate(1.04); } to { transform:translateX(1%); filter:saturate(1.24); } }
@keyframes themeUltraWindow { 0%,100% { background-position:0 0, 0 0, 0 0; } 50% { background-position:24px 0, 0 24px, 0 0; } }
@keyframes themeUltraPing { 0%,100% { transform:scale(1); opacity:.28; } 50% { transform:scale(1.024); opacity:.46; } }
@keyframes themeUltraSteam { from { transform:translate3d(-1%,1%,0) scale(1.01); filter:blur(.1px); } to { transform:translate3d(1%,-1%,0) scale(1.035); filter:blur(.5px); } }
@keyframes themeUltraDream { from { transform:translate3d(-1%,-.8%,0) scale(1); } to { transform:translate3d(1%,.8%,0) scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
body::before,
body::after {
animation:none!important;
}
}
/* Notification invariants: every theme must keep unread badges and actors visible. */
.notify-btn {
overflow:visible!important;
isolation:isolate;
}
.notify-btn::before {
z-index:0;
pointer-events:none;
}
.notify-badge {
z-index:5;
top:-8px;
right:-8px;
min-width:22px;
height:22px;
padding:0 5px;
background:linear-gradient(135deg,#ff2f75,#ff8a3d)!important;
color:#fff!important;
border-color:color-mix(in srgb,var(--bg) 78%,#000 22%)!important;
box-shadow:0 0 0 2px color-mix(in srgb,var(--panel) 86%,transparent), 0 0 18px rgba(255,47,117,.42)!important;
text-shadow:none!important;
}
body.light-theme .notify-badge {
border-color:rgba(255,255,255,.92)!important;
box-shadow:0 0 0 2px rgba(16,18,24,.12), 0 10px 20px rgba(180,35,72,.22)!important;
}
.notification-avatar,
.toast-avatar,
.notification-count {
border:1px solid var(--soft-line)!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface-1)),color-mix(in srgb,var(--accent2) 14%,var(--surface-2)))!important;
color:var(--text)!important;
box-shadow:0 0 18px var(--accent-a14), inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent)!important;
}
.notification-avatar img,
.toast-avatar img {
position:relative;
z-index:1;
}
@supports selector(html:has(body[data-theme="tera-rising"])) {
html:has(body[data-theme="tera-rising"]) {
overflow-x: hidden;
}
}
body[data-theme="tera-rising"] {
--tera-asset-root: /assets/tera-theme;
--surface-1: rgba(6, 11, 27, .82);
--surface-2: rgba(12, 19, 43, .76);
--surface-3: rgba(5, 9, 22, .90);
--surface-hover: rgba(26, 39, 77, .82);
--soft-line: rgba(217, 183, 106, .28);
--soft-glow: rgba(91, 199, 255, .28);
--page-grid: rgba(217, 183, 106, .055);
background:
linear-gradient(180deg, rgba(2, 5, 14, .18), rgba(2, 5, 14, .78) 66%, #030610),
radial-gradient(circle at 16% 10%, rgba(91, 199, 255, .26), transparent 28%),
radial-gradient(circle at 86% 16%, rgba(217, 183, 106, .18), transparent 24%),
url("/assets/tera-theme/tera-bg-hero.png") center top / cover fixed,
#050814;
overflow-x: clip;
overflow-y: visible;
}
body[data-theme="tera-rising"]::after {
background:
linear-gradient(90deg, rgba(217, 183, 106, .16), transparent 10%, transparent 90%, rgba(91, 199, 255, .12)),
radial-gradient(circle at 18% 0%, rgba(91, 199, 255, .20), transparent 26%),
radial-gradient(circle at 82% 0%, rgba(217, 183, 106, .16), transparent 28%),
url("/assets/tera-theme/tera-fog-overlay.png") center calc(100% + 108px) / min(520px, 36vw) auto no-repeat;
opacity: .22;
mix-blend-mode: screen;
animation: teraWorldMist 13s ease-in-out infinite alternate;
}
body[data-theme="tera-rising"] .shell {
--tera-bottom-anchor: -18px;
--tera-mascot-visible-bottom-shift: clamp(21px, 2.6vw, 43px);
max-width: 1500px;
isolation: isolate;
overflow-x: clip;
}
body[data-theme="tera-rising"] .shell-crystal,
body[data-theme="tera-rising"] .shell-mascot {
display: block;
position: fixed;
z-index: 100;
background-repeat: no-repeat;
background-size: contain;
background-position: center bottom;
filter: drop-shadow(0 0 26px rgba(91, 199, 255, .28));
transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.25s ease, opacity 0.25s ease;
}
body[data-theme="tera-rising"] .shell-crystal {
left: max(8px, calc((100vw - 1500px) / 2 - 62px));
bottom: var(--tera-bottom-anchor);
width: clamp(120px, 14vw, 240px);
height: clamp(92px, 10vw, 180px);
background-image: url("/assets/tera-theme/tera-crystal-cluster.png");
opacity: .92;
animation: teraCrystalPulse 2s ease-in-out infinite;
}
body[data-theme="tera-rising"] .shell-crystal:hover {
transform: scale(1.08) translateY(-4px);
filter: drop-shadow(0 0 45px rgba(91, 199, 255, 0.85)) drop-shadow(0 0 25px rgba(168, 85, 247, 0.6));
opacity: 1;
}
body[data-theme="tera-rising"] .shell-mascot {
right: max(10px, calc((100vw - 1500px) / 2 - 50px));
bottom: calc(var(--tera-bottom-anchor) - var(--tera-mascot-visible-bottom-shift));
width: clamp(92px, 10vw, 170px);
height: clamp(128px, 14vw, 236px);
background-image: url("/assets/tera-theme/tera-mascot-creature.png");
opacity: .95;
animation: teraMascotIdle 2.5s ease-in-out infinite;
}
body[data-theme="tera-rising"] .shell-mascot:hover {
transform: scale(1.08) translateY(-4px);
filter: drop-shadow(0 0 45px rgba(217, 183, 106, 0.85)) drop-shadow(0 0 25px rgba(168, 85, 247, 0.6));
opacity: 1;
}
body[data-theme="tera-rising"] .topbar {
border-radius: 16px;
border-color: rgba(217, 183, 106, .30) !important;
background:
linear-gradient(90deg, rgba(217, 183, 106, .12), transparent 24%, transparent 76%, rgba(91, 199, 255, .10)),
rgba(5, 9, 22, .72) !important;
backdrop-filter: blur(18px) saturate(1.25);
box-shadow: 0 18px 48px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}
body[data-theme="tera-rising"] .brand {
position: relative;
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--theme-font-display);
color: #f8f3e8;
text-shadow: 0 0 18px rgba(217, 183, 106, .28);
}
body[data-theme="tera-rising"] .brand::before {
content: "";
width: 34px;
height: 34px;
flex: 0 0 auto;
background: url("/assets/tera-theme/tera-sigil.png") center / 260% auto no-repeat;
border-radius: 999px;
box-shadow: 0 0 18px rgba(91, 199, 255, .25);
}
body[data-theme="tera-rising"] .hero {
min-height: clamp(500px, 52vw, 660px);
grid-template-columns: minmax(0, .86fr) minmax(500px, .88fr);
align-items: center;
gap: clamp(16px, 2.4vw, 34px);
padding: clamp(28px, 3.6vw, 50px);
border-radius: 18px;
border-color: rgba(217, 183, 106, .36) !important;
background:
linear-gradient(90deg, rgba(3, 6, 17, .84) 0%, rgba(5, 10, 25, .58) 44%, rgba(5, 9, 20, .78) 100%),
radial-gradient(circle at 18% 18%, rgba(91, 199, 255, .22), transparent 26%),
url("/assets/tera-theme/tera-bg-hero.png") center / cover no-repeat !important;
box-shadow:
0 34px 96px rgba(0, 0, 0, .48),
0 0 80px rgba(91, 199, 255, .16),
inset 0 0 0 1px rgba(255, 255, 255, .06),
inset 0 0 90px rgba(217, 183, 106, .08) !important;
overflow: visible;
}
body[data-theme="tera-rising"] .hero::before {
z-index: 0;
background:
linear-gradient(90deg, rgba(217, 183, 106, .18), transparent 10%, transparent 90%, rgba(91, 199, 255, .15)),
url("/assets/tera-theme/tera-fog-overlay.png") center calc(100% + 46px) / min(720px, 62%) auto no-repeat !important;
opacity: .38;
}
body[data-theme="tera-rising"] .hero::after {
content: none;
}
body[data-theme="tera-rising"] .hero-copy {
z-index: 3;
min-width: 0;
min-height: 390px;
padding-top: clamp(84px, 9vw, 136px);
justify-content: center;
overflow: visible;
}
body[data-theme="tera-rising"] .eyebrow,
body[data-theme="tera-rising"] .board-kicker,
body[data-theme="tera-rising"] .station-label {
color: #d9b76a;
text-shadow: 0 0 16px rgba(217, 183, 106, .24);
}
body[data-theme="tera-rising"] .eyebrow {
border: 1px solid rgba(217, 183, 106, .30);
border-radius: 6px;
background: linear-gradient(135deg, rgba(217, 183, 106, .17), rgba(91, 199, 255, .06));
}
body[data-theme="tera-rising"] .hero-title {
font-family: var(--theme-font-display);
width: auto;
max-width: min(800px, 56vw);
font-size: clamp(2.9rem, 5vw, 4.85rem);
line-height: .90;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
background:
linear-gradient(180deg, #fff8dc 0%, #d9b76a 38%, #8b6028 70%, #fff2b7 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke: 1px rgba(45, 28, 10, .42);
text-shadow:
0 3px 0 rgba(24, 13, 5, .82),
0 0 24px rgba(217, 183, 106, .28),
0 0 56px rgba(91, 199, 255, .14) !important;
filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .52));
animation: teraTitleRelic 6.4s ease-in-out infinite alternate;
}
body[data-theme="tera-rising"] .hero-title::after {
bottom: -16px;
height: 8px;
background:
linear-gradient(90deg, transparent, rgba(217, 183, 106, .95), rgba(91, 199, 255, .82), rgba(217, 183, 106, .86), transparent),
url("/assets/tera-theme/tera-ui-divider.png") center / 100% auto no-repeat;
box-shadow: 0 0 24px rgba(217, 183, 106, .38);
}
body[data-theme="tera-rising"] .hero-note {
margin-top: 18px;
color: #d9e7ff;
text-shadow: 0 0 16px rgba(91, 199, 255, .18);
}
body[data-theme="tera-rising"] .hero-media {
position: relative;
z-index: 2;
align-self: center;
display: flex;
align-items: stretch;
min-height: clamp(455px, 44vw, 610px);
padding: clamp(112px, 7vw, 140px) clamp(54px, 4vw, 66px) clamp(112px, 7vw, 138px);
isolation: isolate;
transform: translateY(22px);
}
body[data-theme="tera-rising"] .hero-media::before,
body[data-theme="tera-rising"] .hero-media::after {
content: "";
position: absolute;
pointer-events: none;
}
body[data-theme="tera-rising"] .hero-media::before {
z-index: 7;
left: clamp(-112px, -6vw, -58px);
top: clamp(-120px, -6.8vw, -76px);
width: clamp(190px, 17vw, 292px);
height: clamp(285px, 25vw, 438px);
background: url("/assets/tera-theme/tera-character-title-sitting.png") center top / contain no-repeat;
filter: drop-shadow(0 28px 42px rgba(0, 0, 0, .55)) drop-shadow(0 0 28px rgba(91, 199, 255, .18));
animation: teraTitleSittingFloat 5.6s ease-in-out infinite;
}
body[data-theme="tera-rising"] .hero-media::after {
inset: -22px clamp(-24px, -1.8vw, -12px);
z-index: 6;
border-radius: 24px;
background: url("/assets/tera-theme/tera-ui-frame-border.png") center / 100% 100% no-repeat;
}
body[data-theme="tera-rising"] .global-chat {
position: relative;
width: 100%;
border-radius: 16px !important;
border-color: rgba(217, 183, 106, .30) !important;
min-height: 0;
padding: 0;
isolation: isolate;
background:
radial-gradient(circle at 12% 0%, rgba(91, 199, 255, .14), transparent 34%),
linear-gradient(180deg, rgba(6, 11, 27, .78), rgba(3, 6, 15, .90)) !important;
backdrop-filter: blur(18px) saturate(1.2);
overflow: visible;
animation: none !important;
}
body[data-theme="tera-rising"] .global-chat::after {
content: none;
}
body[data-theme="tera-rising"] .global-chat>* {
position: relative;
z-index: 2;
}
body[data-theme="tera-rising"] .global-chat .chat-head {
align-items: center;
padding:
clamp(14px, 1.2vw, 18px) clamp(54px, 4.8vw, 72px) clamp(14px, 1.2vw, 18px);
background:
linear-gradient(180deg, rgba(12, 19, 43, .74), rgba(5, 9, 22, .42)),
linear-gradient(90deg, rgba(217, 183, 106, .10), transparent 34%, rgba(91, 199, 255, .08));
}
body[data-theme="tera-rising"] .global-chat .chat-head::after {
left: clamp(48px, 4.2vw, 64px);
right: clamp(48px, 4.2vw, 64px);
}
body[data-theme="tera-rising"] .global-chat .chat-list {
height: clamp(236px, 21vw, 278px);
padding: clamp(12px, 1vw, 16px) clamp(34px, 3.2vw, 46px);
}
body[data-theme="tera-rising"] .global-chat .chat-bubble {
max-width: min(96%, 560px);
}
body[data-theme="tera-rising"] .global-chat .chat-bubble.has-gif {
max-width: min(96%, 480px);
}
body[data-theme="tera-rising"] .global-chat .chat-gif {
width: min(420px, 100%);
}
body[data-theme="tera-rising"] .global-chat .chat-compose {
position: relative;
gap: 10px;
padding: clamp(12px, 1vw, 16px) clamp(44px, 4vw, 58px);
}
body[data-theme="tera-rising"] .global-chat .composer-media-preview {
position: absolute;
left: clamp(44px, 4vw, 58px);
right: clamp(44px, 4vw, 58px);
bottom: calc(100% + 10px);
z-index: 8;
display: none;
align-items: center;
justify-content: flex-start;
gap: 8px;
flex-wrap: nowrap;
min-height: 0;
max-height: 74px;
padding: 6px;
overflow: hidden;
pointer-events: auto;
}
body[data-theme="tera-rising"] .global-chat .composer-media-preview.active {
display: flex;
}
body[data-theme="tera-rising"] .global-chat .composer-media-chip {
max-width: 104px;
max-height: 68px;
border-radius: 12px;
background: rgba(3, 7, 18, .86);
box-shadow: 0 16px 34px rgba(0, 0, 0, .38), 0 0 18px rgba(91, 199, 255, .12);
}
body[data-theme="tera-rising"] .global-chat .composer-media-chip img.chat-custom-emoji {
width: 30px;
height: 30px;
}
body[data-theme="tera-rising"] .global-chat .composer-media-chip img.chat-gif {
max-width: 94px;
max-height: 58px;
object-fit: cover;
}
body[data-theme="tera-rising"] .global-chat .composer-media-remove {
width: 18px;
height: 18px;
top: 3px;
right: 3px;
}
body[data-theme="tera-rising"] .global-chat .chat-compose {
align-items: center;
}
body[data-theme="tera-rising"] .global-chat .chat-compose textarea {
min-height: 38px;
height: 38px;
padding: 8px 14px;
resize: none;
}
body[data-theme="tera-rising"] .global-chat .chat-send {
min-width: 82px;
min-height: 38px;
height: 38px;
}
body[data-theme="tera-rising"] .hero-cta,
body[data-theme="tera-rising"] .btn-neon-electric,
body[data-theme="tera-rising"] .station-card-btn,
body[data-theme="tera-rising"] .nav-item,
body[data-theme="tera-rising"] .board-link-btn,
body[data-theme="tera-rising"] .mode-btn,
body[data-theme="tera-rising"] .class-btn,
body[data-theme="tera-rising"] .chat-send,
body[data-theme="tera-rising"] .profile-btn {
border-radius: 8px !important;
border-color: rgba(217, 183, 106, .34) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
linear-gradient(135deg, rgba(217, 183, 106, .18), rgba(91, 199, 255, .08)) !important;
color: #f8f3e8 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 10px 28px rgba(0, 0, 0, .24), 0 0 20px rgba(91, 199, 255, .08) !important;
}
body[data-theme="tera-rising"] .nav-item:hover,
body[data-theme="tera-rising"] .board-link-btn:hover,
body[data-theme="tera-rising"] .mode-btn:hover,
body[data-theme="tera-rising"] .class-btn:hover,
body[data-theme="tera-rising"] .chat-send:hover,
body[data-theme="tera-rising"] .station-card-btn:hover {
transform: translateY(-2px);
border-color: rgba(217, 183, 106, .72) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 36px rgba(0, 0, 0, .28), 0 0 32px rgba(91, 199, 255, .18) !important;
}
body[data-theme="tera-rising"] .event-carousel {
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
margin-top: 0;
padding-top: 0;
}
body[data-theme="tera-rising"] #archive-carousel {
display: flex;
align-items: center !important;
gap: 14px;
margin-bottom: clamp(16px, 2vw, 28px);
padding: 8px 18px 12px;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item {
position: relative;
flex: 0 0 clamp(220px, 20vw, 286px);
min-width: 0;
overflow: visible;
border-color: transparent !important;
background: transparent !important;
box-shadow: none !important;
}
body[data-theme="tera-rising"] .carousel-item {
border-radius: 14px;
border-color: transparent !important;
background: linear-gradient(180deg, rgba(10, 18, 42, .78), rgba(5, 9, 22, .88));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item::before {
content: "";
position: absolute;
inset: -8px;
z-index: 2;
border-radius: 18px;
background: url("/assets/tera-theme/tera-ui-carousel-card-frame-off-with-background.png") center / 100% 100% no-repeat;
opacity: 1;
pointer-events: none;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item::after {
content: none;
}
body[data-theme="tera-rising"] .carousel-item.active {
border-color: rgba(217, 183, 106, .70);
background:
radial-gradient(circle at 20% 0%, rgba(91, 199, 255, .16), transparent 34%),
linear-gradient(180deg, rgba(40, 30, 13, .72), rgba(8, 13, 28, .92));
box-shadow: 0 18px 42px rgba(0, 0, 0, .28), 0 0 34px rgba(217, 183, 106, .16);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active {
z-index: 5;
flex-basis: clamp(330px, 30vw, 440px);
min-height: clamp(220px, 20vw, 276px);
display: flex;
flex-direction: column;
justify-content: center;
border-color: transparent !important;
border-radius: 20px;
background: transparent !important;
box-shadow: none !important;
transform: translateY(-2px);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active::before {
content: "";
position: absolute;
inset: clamp(-12px, -.9vw, -7px);
z-index: 1;
border-radius: 24px;
background: url("/assets/tera-theme/tera-ui-carousel-card-frame-on-with-background.png") center / 100% 100% no-repeat;
opacity: 1;
pointer-events: none;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active::after {
content: none;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-pick,
body[data-theme="tera-rising"] #archive-carousel .carousel-actions {
position: relative;
z-index: 10;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-pick {
min-height: clamp(156px, 18vw, 232px);
padding: 30px 28px 26px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-pick {
min-height: 0;
flex: 0 0 auto;
padding: clamp(18px, 1.8vw, 24px) clamp(34px, 3vw, 48px) 0;
text-align: center;
align-items: center;
justify-content: center;
transform: translateY(-10px);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-year {
color: #c9d8ef;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-year {
display: none;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active strong {
position: relative;
max-width: 100%;
font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", cursive;
font-size: clamp(1.72rem, 2.8vw, 2.36rem);
line-height: .82;
text-align: center;
letter-spacing: .015em;
font-weight: 700;
text-transform: none;
white-space: nowrap;
overflow: visible;
background: linear-gradient(180deg, #fffdf2 0%, #f3dfb0 38%, #d8b56c 70%, #fff1c0 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-stroke: .35px rgba(22, 13, 6, .62);
filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .58)) drop-shadow(0 0 14px rgba(91, 199, 255, .16)) drop-shadow(0 0 12px rgba(255, 231, 174, .16));
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-actions {
position: relative;
display: grid;
gap: clamp(5px, .55vw, 8px);
width: min(100%, 312px);
max-width: calc(100% - clamp(58px, 5vw, 88px));
margin: clamp(7px, .75vw, 10px) auto 0;
padding: 0;
transform: translateY(-8px);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-actions::before,
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-actions::after {
content: "";
position: absolute;
inset: -18px -34px;
z-index: -1;
pointer-events: none;
border-radius: 999px;
background:
radial-gradient(ellipse at 50% 45%, rgba(91, 199, 255, .22), transparent 56%),
radial-gradient(ellipse at 50% 54%, rgba(217, 183, 106, .13), transparent 62%);
filter: blur(10px);
opacity: .78;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-actions::after {
inset: -5px -16px;
background: radial-gradient(ellipse at 50% 50%, rgba(255, 236, 162, .12), transparent 58%);
filter: blur(5px);
opacity: .72;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .event-mode-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(8px, .8vw, 12px);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .mode-btn,
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .board-link-btn {
width: 100%;
min-height: 50px;
height: 50px;
border: 0 !important;
border-radius: 0 !important;
color: transparent !important;
font-size: 0 !important;
letter-spacing: 0 !important;
text-shadow: none !important;
background-color: transparent !important;
background-position: center !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .mode-btn.active {
color: transparent !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .board-link-btn {
justify-self: center;
width: 200px;
min-height: 57px;
height: 57px;
background-size: 100% 100% !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .mode-btn[data-mode="group"] {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-group-off.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .mode-btn[data-mode="group"].active {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-group.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .mode-btn[data-mode="solo"] {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-solo-off.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .mode-btn[data-mode="solo"].active {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-solo.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .event-compare-link {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-class-compare.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .event-compare-link.active {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-class-compare.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] .event-stack {
position: relative;
margin-top: 8px;
isolation: isolate;
}
body[data-theme="tera-rising"] #archive-stack {
margin-top: 8px;
min-height: clamp(520px, calc(100vh - 142px), 660px);
padding: clamp(82px, 5.4vw, 102px) clamp(168px, 10.8vw, 210px) clamp(62px, 3.8vw, 78px);
}
body[data-theme="tera-rising"] .event-stack::before {
content: none;
}
body[data-theme="tera-rising"] #archive-stack::before {
content: "";
position: absolute;
right: clamp(34px, 4vw, 78px);
top: clamp(128px, 10vw, 178px);
z-index: 21;
width: clamp(160px, 14vw, 240px);
height: clamp(240px, 21vw, 360px);
background: url("/assets/tera-theme/tera-character-event-stack.png") center top / contain no-repeat;
opacity: .76;
filter: drop-shadow(0 30px 42px rgba(0, 0, 0, .52)) drop-shadow(0 0 24px rgba(217, 183, 106, .18));
pointer-events: none;
animation: teraCharacterFloat 8s ease-in-out infinite alternate-reverse;
}
body[data-theme="tera-rising"] #archive-stack .event-panel::before {
content: "";
position: absolute;
right: calc(clamp(34px, 4vw, 78px) - 20px);
top: calc(clamp(128px, 10vw, 178px) + 20px);
z-index: 1;
width: calc(clamp(160px, 14vw, 240px) + 40px);
height: calc(clamp(160px, 14vw, 240px) + 40px);
background: url("/assets/tera-theme/tera-magic-aura.png") center / contain no-repeat;
opacity: .38;
pointer-events: none;
animation: teraRuneRotate 20s linear infinite;
}
body[data-theme="tera-rising"] .event-panel {
position: relative;
z-index: 2;
isolation: isolate;
border-radius: 16px;
padding: clamp(16px, 1.4vw, 22px);
border-color: rgba(217, 183, 106, .36);
background:
linear-gradient(90deg, rgba(217, 183, 106, .10), transparent 16%, transparent 84%, rgba(91, 199, 255, .08)),
radial-gradient(circle at 10% 0%, rgba(91, 199, 255, .18), transparent 32%),
linear-gradient(180deg, rgba(7, 13, 31, .88), rgba(3, 7, 18, .94));
box-shadow: 0 32px 88px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .05);
overflow: visible;
}
body[data-theme="tera-rising"] #archive-stack::after {
content: "";
position: absolute;
inset: clamp(-118px, -7.8vw, -90px) clamp(-48px, -3.3vw, -32px) clamp(-158px, -10vw, -126px);
z-index: 20;
border-radius: 24px;
background: url("/assets/tera-theme/tera-ui-frame-border.png") center / 100% 100% no-repeat;
opacity: 1;
pointer-events: none;
}
body[data-theme="tera-rising"] .event-mode,
body[data-theme="tera-rising"] .leaderboard-card,
body[data-theme="tera-rising"] .event-mode-tabs,
body[data-theme="tera-rising"] .mode-tabs,
body[data-theme="tera-rising"] .mode-btn,
body[data-theme="tera-rising"] .board-link-btn {
position: relative;
z-index: 3;
}
body[data-theme="tera-rising"] .leaderboard-card,
body[data-theme="tera-rising"] .group-card,
body[data-theme="tera-rising"] .table-wrap,
body[data-theme="tera-rising"] .empty-box {
position: relative;
isolation: isolate;
border-radius: 14px !important;
border-color: rgba(217, 183, 106, .24) !important;
background:
linear-gradient(135deg, rgba(217, 183, 106, .075), transparent 36%),
linear-gradient(180deg, rgba(11, 18, 40, .72), rgba(4, 8, 20, .88)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 48px rgba(0, 0, 0, .24) !important;
overflow: visible;
}
body[data-theme="tera-rising"] #archive-stack .class-rail-wrap::after,
body[data-theme="tera-rising"] #archive-stack .solo-dungeon-tabs::after {
background:
linear-gradient(90deg, transparent, rgba(217, 183, 106, .82), rgba(91, 199, 255, .48), rgba(217, 183, 106, .76), transparent),
url("/assets/tera-theme/tera-ui-divider.png") center / min(560px, 94%) auto no-repeat;
opacity: .68;
}
body[data-theme="tera-rising"] #archive-stack .event-panel>.event-mode.active {
position: relative;
z-index: 4;
}
body[data-theme="tera-rising"] #archive-stack .board-title {
font-size: clamp(1.18rem, 2vw, 2rem);
max-width: min(100%, 940px);
}
body[data-theme="tera-rising"] #archive-stack .board-meta {
margin-top: 3px;
}
body[data-theme="tera-rising"] #archive-stack .mode-btn {
min-height: 38px;
padding: 8px 16px;
}
body[data-theme="tera-rising"] #archive-stack .solo-dungeon-tabs {
margin-bottom: 10px;
padding-bottom: 10px;
position: relative;
}
body[data-theme="tera-rising"] #archive-stack .solo-dungeon-tabs::after {
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: -4px;
height: 10px;
pointer-events: none;
}
body[data-theme="tera-rising"] #archive-stack .class-rail-wrap {
margin-bottom: 10px;
padding-bottom: 10px;
}
body[data-theme="tera-rising"] #archive-stack .class-btn {
flex-basis: 104px;
min-height: 36px;
padding: 8px 8px;
}
body[data-theme="tera-rising"] #archive-stack .leaderboard-card {
padding: clamp(14px, 1.2vw, 18px);
}
body[data-theme="tera-rising"] #archive-stack .leaderboard-card::after {
content: "";
position: absolute;
right: clamp(20px, 4vw, 58px);
bottom: clamp(8px, 2vw, 28px);
z-index: 0;
width: clamp(120px, 13vw, 210px);
height: clamp(120px, 13vw, 210px);
background: url("/assets/tera-theme/tera-rune-circle.png") center / contain no-repeat;
opacity: .08;
mix-blend-mode: screen;
pointer-events: none;
}
body[data-theme="tera-rising"] #archive-stack .leaderboard-card>* {
position: relative;
z-index: 1;
}
body[data-theme="tera-rising"] #archive-stack .board-head {
display: none;
}
body[data-theme="tera-rising"] #archive-stack .lb-scroll {
max-height: clamp(360px, 50vh, 520px);
overflow-y: auto;
overscroll-behavior-y: contain;
border-radius: 16px;
}
body[data-theme="tera-rising"] #archive-stack .table-wrap {
overflow-x: auto;
overflow-y: visible;
}
body[data-theme="tera-rising"] #archive-stack .group-card {
margin-bottom: 8px;
padding: 12px;
}
body[data-theme="tera-rising"] #archive-stack .group-head {
margin-bottom: 8px;
}
body[data-theme="tera-rising"] #archive-stack .member-stack {
gap: 6px;
}
body[data-theme="tera-rising"] #archive-stack .member-row {
min-height: 34px;
padding: 8px 10px;
}
body[data-theme="tera-rising"] #archive-stack .table-wrap table {
border-spacing: 0 5px;
}
body[data-theme="tera-rising"] #archive-stack .table-wrap th,
body[data-theme="tera-rising"] #archive-stack .table-wrap td {
padding: 9px 10px;
}
body[data-theme="tera-rising"] .leaderboard-card::before {
background:
linear-gradient(120deg, rgba(217, 183, 106, .10), transparent 24%, transparent 78%, rgba(91, 199, 255, .10)) !important;
}
body[data-theme="tera-rising"] .contact-panel,
body[data-theme="tera-rising"] .likers-panel,
body[data-theme="tera-rising"] .social-role-panel {
position: relative;
isolation: isolate;
border-color: rgba(217, 183, 106, .30) !important;
background:
radial-gradient(circle at 12% 0%, rgba(91, 199, 255, .12), transparent 34%),
linear-gradient(180deg, rgba(7, 13, 31, .90), rgba(3, 7, 18, .96)) !important;
box-shadow: 0 28px 78px rgba(0, 0, 0, .52), 0 0 42px rgba(91, 199, 255, .10), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}
body[data-theme="tera-rising"] .likers-body {
padding-top: 6px !important;
}
body[data-theme="tera-rising"] #likers-modal .likers-panel {
overflow: visible;
padding-top: 0;
}
body[data-theme="tera-rising"] #likers-modal .likers-header {
position: relative;
z-index: 4;
padding: 28px 40px 6px;
}
body[data-theme="tera-rising"] #likers-modal .likers-body {
padding: 6px 40px 28px !important;
}
body[data-theme="tera-rising"] #likers-modal .panel-divider {
position: absolute;
left: 50%;
top: -45px;
z-index: 3;
width: min(760px, calc(100% - 68px));
height: 112px;
transform: translateX(-50%);
pointer-events: none;
}
/* TERA panel divider — fixed height, object-fit:cover crops to center ornament */
body[data-theme="tera-rising"] .panel-divider {
height: 90px;
overflow: hidden;
background: none;
opacity: 1;
flex-shrink: 0;
}
body[data-theme="tera-rising"] .tera-divider-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 50%;
opacity: 0.92;
pointer-events: none;
user-select: none;
}
body[data-theme="tera-rising"] .board-title,
body[data-theme="tera-rising"] .section-title {
font-family: var(--theme-font-display);
color: #fff3c7;
text-shadow: 0 0 20px rgba(217, 183, 106, .18);
}
body[data-theme="tera-rising"] .section-title {
display: flex;
align-items: center;
gap: 14px;
color: #d9b76a;
}
body[data-theme="tera-rising"] .section-title::before,
body[data-theme="tera-rising"] .section-title::after {
content: "";
height: 1px;
flex: 1;
background: linear-gradient(90deg, transparent, rgba(217, 183, 106, .44), rgba(91, 199, 255, .26), transparent);
}
body[data-theme="tera-rising"] .rank-1 {
border-color: rgba(255, 226, 138, .96) !important;
box-shadow: 0 0 0 1px rgba(255, 226, 138, .48), 0 0 48px rgba(217, 183, 106, .32), 0 20px 60px rgba(0, 0, 0, .28) !important;
}
body[data-theme="tera-rising"] .rank-2 {
border-color: rgba(160, 228, 255, .80) !important;
box-shadow: 0 0 34px rgba(91, 199, 255, .22) !important;
}
body[data-theme="tera-rising"] .rank-3 {
border-color: rgba(215, 143, 82, .80) !important;
}
@keyframes teraWorldMist {
from {
transform: translate3d(-1%, -.5%, 0) scale(1.01);
opacity: .16;
}
to {
transform: translate3d(1%, .5%, 0) scale(1.035);
opacity: .26;
}
}
@keyframes teraCrystalPulse {
0%,
100% {
opacity: .78;
filter: drop-shadow(0 0 10px rgba(91, 199, 255, .3)) drop-shadow(0 0 4px rgba(168, 85, 247, .15));
}
50% {
opacity: 1;
filter: drop-shadow(0 0 40px rgba(91, 199, 255, .82)) drop-shadow(0 0 20px rgba(168, 85, 247, .6));
}
}
@keyframes teraMascotIdle {
0%,
100% {
opacity: .82;
filter: drop-shadow(0 0 10px rgba(217, 183, 106, .3)) drop-shadow(0 0 4px rgba(168, 85, 247, .15));
}
50% {
opacity: 1;
filter: drop-shadow(0 0 40px rgba(217, 183, 106, .82)) drop-shadow(0 0 20px rgba(168, 85, 247, .6));
}
}
@keyframes teraCharacterFloat {
from {
transform: translateY(0);
}
to {
transform: translateY(-8px);
}
}
@keyframes teraTitleSittingFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-14px);
}
}
@keyframes teraRuneRotate {
to {
transform: rotate(360deg);
}
}
@keyframes teraTitleRelic {
from {
filter: drop-shadow(0 15px 26px rgba(0, 0, 0, .48));
}
to {
filter: drop-shadow(0 18px 32px rgba(0, 0, 0, .55)) drop-shadow(0 0 18px rgba(217, 183, 106, .16));
}
}
@media (max-width:1180px) {
body[data-theme="tera-rising"] .hero {
grid-template-columns: 1fr;
min-height: unset;
}
body[data-theme="tera-rising"] .hero-copy {
min-height: 360px;
padding-top: 120px;
}
body[data-theme="tera-rising"] .hero::after {
right: clamp(10px, 8vw, 90px);
top: -64px;
}
body[data-theme="tera-rising"] .hero-media {
min-height: 330px;
padding: 76px 28px 70px;
transform: none;
}
body[data-theme="tera-rising"] .hero-media::before {
content: none;
}
body[data-theme="tera-rising"] .hero-media::after {
inset: -20px -18px;
}
}
@media (max-width:900px) {
body[data-theme="tera-rising"] {
background-attachment: scroll;
}
body[data-theme="tera-rising"] .hero-media::after,
body[data-theme="tera-rising"] #archive-stack::after {
content: none;
}
body[data-theme="tera-rising"] .topbar {
width: 100%;
max-width: 100%;
overflow: hidden;
}
body[data-theme="tera-rising"] .topbar .nav,
body[data-theme="tera-rising"] .nav {
width: 100%;
max-width: 100%;
display: flex;
flex-wrap: wrap;
overflow-x: visible;
}
body[data-theme="tera-rising"] .nav-item {
flex: 0 1 auto;
max-width: calc(100vw - 34px);
padding-inline: 12px;
}
body[data-theme="tera-rising"] .shell {
padding-inline: 10px;
padding-bottom: 34px;
}
body[data-theme="tera-rising"] .shell-crystal,
body[data-theme="tera-rising"] .shell-mascot {
display: none;
}
body[data-theme="tera-rising"] .hero {
gap: 14px;
padding: 16px 12px;
border-radius: 14px;
overflow: hidden;
box-shadow:
0 18px 44px rgba(0, 0, 0, .38),
inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
}
body[data-theme="tera-rising"] .hero-copy {
min-height: 0;
padding-top: 8px;
max-width: 100%;
}
body[data-theme="tera-rising"] .hero::after {
left: 50%;
right: auto;
top: -54px;
width: 210px;
height: 315px;
transform: translateX(-6%);
opacity: .88;
}
body[data-theme="tera-rising"] .hero-title {
width: min(100%, 340px) !important;
max-width: 100% !important;
font-size: clamp(1.72rem, 8vw, 2.2rem);
line-height: .98;
overflow-wrap: normal;
word-break: normal;
}
body[data-theme="tera-rising"] .hero-note {
margin-top: 12px;
font-size: .82rem;
line-height: 1.35;
}
body[data-theme="tera-rising"] .hero-actions,
body[data-theme="tera-rising"] .station-actions {
margin-top: 12px;
gap: 8px;
}
body[data-theme="tera-rising"] .hero-media {
min-height: 0;
display: block;
padding: 14px 0 0;
transform: none;
}
body[data-theme="tera-rising"] #current-carousel {
display: block;
margin: 0 0 10px;
padding: 0;
overflow: visible;
}
body[data-theme="tera-rising"] #current-carousel .carousel-item {
display: none;
}
body[data-theme="tera-rising"] #current-carousel .carousel-item.active {
display: block;
min-width: 0;
min-height: 0;
border: 0 !important;
border-radius: 0;
background: transparent !important;
box-shadow: none !important;
transform: none;
}
body[data-theme="tera-rising"] #current-carousel .carousel-pick {
display: none;
}
body[data-theme="tera-rising"] #current-carousel .carousel-actions {
display: grid;
gap: 8px;
padding: 0;
}
body[data-theme="tera-rising"] #current-carousel .event-mode-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn,
body[data-theme="tera-rising"] #current-carousel .board-link-btn {
width: 100%;
min-height: 50px;
height: 50px;
border: 0 !important;
border-radius: 0 !important;
color: transparent !important;
font-size: 0 !important;
letter-spacing: 0 !important;
text-shadow: none !important;
background-color: transparent !important;
background-position: center !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn[data-mode="group"] {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-group-off.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn[data-mode="group"].active {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-group.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn[data-mode="solo"] {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-solo-off.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn[data-mode="solo"].active {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-solo.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .board-link-btn {
justify-self: center;
width: min(220px, 100%);
min-height: 57px;
height: 57px;
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-class-compare.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .carousel-compare-actions {
display: grid;
}
body[data-theme="tera-rising"] #current-stack {
margin-top: 0;
min-height: 0;
padding: 0;
}
body[data-theme="tera-rising"] #current-stack .event-panel {
padding: 10px;
border-radius: 14px;
overflow: visible;
box-shadow: 0 14px 34px rgba(0, 0, 0, .28) !important;
}
body[data-theme="tera-rising"] #current-stack .board-head {
display: none;
}
body[data-theme="tera-rising"] #current-stack .leaderboard-card {
padding: 10px;
border-radius: 12px !important;
overflow: hidden;
}
body[data-theme="tera-rising"] #current-stack .lb-scroll {
max-height: min(420px, 54vh);
border-radius: 12px;
}
body[data-theme="tera-rising"] #current-stack .group-card {
margin-bottom: 6px;
padding: 8px;
border-radius: 12px;
}
body[data-theme="tera-rising"] #current-stack .group-head {
margin-bottom: 6px;
gap: 6px;
}
body[data-theme="tera-rising"] #current-stack .group-rank {
min-width: 44px;
font-size: 1.24rem;
}
body[data-theme="tera-rising"] #current-stack .group-time {
font-size: .92rem;
}
body[data-theme="tera-rising"] #current-stack .member-stack {
gap: 4px;
}
body[data-theme="tera-rising"] #current-stack .member-row {
grid-template-columns: 72px minmax(0, 1fr);
gap: 5px;
min-height: 28px;
padding: 5px 6px;
font-size: .76rem;
}
body[data-theme="tera-rising"] #current-stack .member-row em {
display: none;
}
body[data-theme="tera-rising"] #current-stack .table-wrap table {
min-width: 620px;
border-spacing: 0 4px;
}
body[data-theme="tera-rising"] #current-stack .table-wrap th,
body[data-theme="tera-rising"] #current-stack .table-wrap td {
padding: 6px 7px;
font-size: .76rem;
}
body[data-theme="tera-rising"] #current-stack .group-card,
body[data-theme="tera-rising"] #archive-stack .group-card {
position: relative;
isolation: isolate;
border-color: rgba(217, 183, 106, .36) !important;
background:
radial-gradient(circle at 16% 0%, rgba(91, 199, 255, .16), transparent 38%),
linear-gradient(135deg, rgba(217, 183, 106, .10), transparent 34%),
linear-gradient(180deg, rgba(13, 20, 44, .86), rgba(4, 8, 20, .94)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .08),
0 10px 24px rgba(0, 0, 0, .24) !important;
}
body[data-theme="tera-rising"] #current-stack .group-card::before,
body[data-theme="tera-rising"] #archive-stack .group-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(217, 183, 106, .12), transparent 18%, transparent 82%, rgba(91, 199, 255, .10)),
radial-gradient(circle at 88% 18%, rgba(91, 199, 255, .12), transparent 34%);
opacity: .9;
pointer-events: none;
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-1,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-1 {
background:
linear-gradient(90deg, rgba(255, 226, 138, .34), rgba(25, 28, 40, .74) 38%, rgba(8, 13, 28, .92)),
linear-gradient(180deg, rgba(28, 25, 18, .92), rgba(5, 8, 18, .96)) !important;
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-2,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-2 {
background:
linear-gradient(90deg, rgba(185, 231, 255, .26), rgba(18, 28, 42, .74) 38%, rgba(8, 13, 28, .92)),
linear-gradient(180deg, rgba(13, 20, 34, .92), rgba(5, 8, 18, .96)) !important;
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-3,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-3 {
background:
linear-gradient(90deg, rgba(255, 170, 96, .24), rgba(35, 24, 20, .70) 38%, rgba(8, 13, 28, .92)),
linear-gradient(180deg, rgba(28, 18, 14, .92), rgba(5, 8, 18, .96)) !important;
}
body[data-theme="tera-rising"] #current-stack .member-row,
body[data-theme="tera-rising"] #archive-stack .member-row {
border-color: rgba(217, 183, 106, .22);
background:
linear-gradient(90deg, rgba(5, 9, 22, .72), rgba(10, 17, 38, .66)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}
body[data-theme="tera-rising"] #archive-carousel {
gap: 12px;
margin-bottom: 24px;
padding: 18px 10px 12px;
padding-left: 10px;
padding-right: 10px;
scroll-padding-left: 12px;
scroll-padding-right: 12px;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item {
flex-basis: calc(100vw - 52px);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active {
flex-basis: min(560px, calc(100vw - 24px));
min-height: 214px;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active::before {
inset: -8px;
opacity: 1;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-pick {
padding: 18px 30px 0;
text-align: center;
align-items: center;
transform: translateY(-6px);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active strong {
font-size: clamp(1.24rem, 6.4vw, 1.62rem);
line-height: .92;
max-width: 100%;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-actions {
width: min(100%, 330px);
max-width: calc(100% - 44px);
margin: 7px auto 0;
gap: 5px;
padding: 0;
transform: translateY(-6px);
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .event-mode-tabs {
gap: 7px;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .mode-btn,
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .board-link-btn {
min-height: 50px;
height: 50px;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .board-link-btn {
width: 200px;
min-height: 57px;
height: 57px;
background-size: 100% 100% !important;
}
body[data-theme="tera-rising"] .event-stack {
margin-top: 24px;
}
body[data-theme="tera-rising"] #archive-stack {
margin-top: 18px;
min-height: 0;
padding: 34px 8px 18px;
}
body[data-theme="tera-rising"] #archive-stack::before {
content: none;
}
body[data-theme="tera-rising"] #archive-stack::after {
inset: -66px -42px -68px;
}
body[data-theme="tera-rising"] #archive-stack .group-head {
align-items: flex-start !important;
flex-direction: column !important;
}
body[data-theme="tera-rising"] .global-chat {
padding: 0;
border-radius: 14px !important;
overflow: visible;
}
body[data-theme="tera-rising"] .global-chat::before,
body[data-theme="tera-rising"] .leaderboard-card::before {
content: none !important;
}
body[data-theme="tera-rising"] .global-chat::after,
body[data-theme="tera-rising"] .leaderboard-card::after {
content: "";
position: absolute;
left: 50%;
top: -20px;
z-index: 6;
width: min(260px, calc(100% - 44px));
height: 40px;
transform: translateX(-50%);
background: url("/assets/tera-theme/tera-ui-divider.png") center / 100% auto no-repeat;
opacity: .98;
pointer-events: none;
}
body[data-theme="tera-rising"] .global-chat>*,
body[data-theme="tera-rising"] .leaderboard-card>* {
position: relative;
z-index: 7;
}
body[data-theme="tera-rising"] .global-chat .chat-head {
padding: 20px 14px 9px;
}
body[data-theme="tera-rising"] .global-chat .chat-list {
height: min(236px, 42vh);
padding: 8px 10px;
}
body[data-theme="tera-rising"] .global-chat .chat-compose {
gap: 7px;
padding: 10px;
}
body[data-theme="tera-rising"] .event-panel,
body[data-theme="tera-rising"] .leaderboard-card,
body[data-theme="tera-rising"] .group-card,
body[data-theme="tera-rising"] .table-wrap,
body[data-theme="tera-rising"] .empty-box {
border-radius: 12px !important;
}
body[data-theme="tera-rising"] .event-panel,
body[data-theme="tera-rising"] .leaderboard-card {
overflow: visible;
}
body[data-theme="tera-rising"] .group-card,
body[data-theme="tera-rising"] .table-wrap,
body[data-theme="tera-rising"] .empty-box {
overflow: hidden;
}
body[data-theme="tera-rising"] #archive-stack .leaderboard-card {
padding: 20px 6px 8px;
}
body[data-theme="tera-rising"] #archive-stack .lb-scroll {
max-height: none;
border-radius: 12px;
}
body[data-theme="tera-rising"] #archive-stack .group-card {
margin-bottom: 4px;
padding: 6px;
}
body[data-theme="tera-rising"] #archive-stack .group-head {
margin-bottom: 5px;
gap: 5px;
}
body[data-theme="tera-rising"] #archive-stack .member-stack {
gap: 4px;
}
body[data-theme="tera-rising"] #archive-stack .member-row {
min-height: 24px;
padding: 4px 6px;
}
body[data-theme="tera-rising"] #archive-stack .table-wrap table {
border-spacing: 0 3px;
}
body[data-theme="tera-rising"] #archive-stack .table-wrap th,
body[data-theme="tera-rising"] #archive-stack .table-wrap td {
padding: 4px 6px;
font-size: .74rem;
}
body[data-theme="tera-rising"] #archive-stack .mode-btn,
body[data-theme="tera-rising"] #archive-stack .class-btn {
min-height: 34px;
padding: 7px 9px;
font-size: .78rem;
}
body[data-theme="tera-rising"] #archive-stack .solo-dungeon-tabs,
body[data-theme="tera-rising"] #archive-stack .class-rail-wrap {
margin-bottom: 8px;
padding-bottom: 8px;
}
body[data-theme="tera-rising"] .shell::before {
width: 108px;
height: 80px;
opacity: .58;
}
body[data-theme="tera-rising"] .shell::after {
width: 76px;
height: 110px;
opacity: .70;
}
}
/* MMORPG Theme Social Settings modal design overrides */
body[data-theme="tera-rising"] .settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
align-items: stretch;
}
body[data-theme="tera-rising"] .setting-card {
background: linear-gradient(180deg, rgba(8, 14, 31, 0.94), rgba(4, 7, 18, 0.98)) !important;
border: 1px solid rgba(217, 183, 106, 0.32) !important;
box-shadow: inset 0 0 16px rgba(91, 199, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.42) !important;
border-radius: 12px !important;
padding: 16px !important;
position: relative;
}
body[data-theme="tera-rising"] .setting-card strong {
display: block;
font-family: var(--theme-font-display);
color: #d9b76a !important;
font-size: 0.98rem;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
border-bottom: 1px solid rgba(217, 183, 106, 0.22);
padding-bottom: 6px;
text-shadow: 0 0 12px rgba(217, 183, 106, 0.24);
}
body[data-theme="tera-rising"] .setting-card label {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
margin: 4px 0 !important;
border-radius: 6px;
cursor: pointer;
transition: background 0.16s ease, color 0.16s ease;
font-weight: 850;
color: #b9c3d8 !important;
}
body[data-theme="tera-rising"] .setting-card label:hover {
background: rgba(91, 199, 255, 0.08);
color: #f8f3e8 !important;
}
body[data-theme="tera-rising"] .setting-card input[type="checkbox"],
body[data-theme="tera-rising"] .setting-card input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1px solid rgba(217, 183, 106, 0.5);
background: rgba(3, 7, 18, 0.72);
cursor: pointer;
position: relative;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
}
body[data-theme="tera-rising"] .setting-card input[type="radio"] {
border-radius: 999px;
}
body[data-theme="tera-rising"] .setting-card input[type="checkbox"] {
border-radius: 4px;
}
body[data-theme="tera-rising"] .setting-card input[type="radio"]:checked {
border-color: #5bc7ff;
box-shadow: 0 0 10px rgba(91, 199, 255, 0.5);
}
body[data-theme="tera-rising"] .setting-card input[type="radio"]:checked::before {
content: "";
width: 8px;
height: 8px;
border-radius: 999px;
background: #5bc7ff;
box-shadow: 0 0 6px #5bc7ff;
}
body[data-theme="tera-rising"] .setting-card input[type="checkbox"]:checked {
border-color: #5bc7ff;
box-shadow: 0 0 10px rgba(91, 199, 255, 0.5);
background: rgba(91, 199, 255, 0.12);
}
body[data-theme="tera-rising"] .setting-card input[type="checkbox"]:checked::before {
content: "✓";
color: #5bc7ff;
font-size: 11px;
font-weight: bold;
text-shadow: 0 0 6px #5bc7ff;
}
body[data-theme="tera-rising"] .settings-grid .profile-btn {
grid-column: 1 / -1;
margin-top: 8px;
min-height: 40px;
font-family: var(--theme-font-display);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 8px !important;
border: 1px solid rgba(217, 183, 106, 0.72) !important;
background: linear-gradient(135deg, rgba(217, 183, 106, 0.28), rgba(91, 199, 255, 0.14)), rgba(6, 11, 27, 0.90) !important;
color: #f8f3e8 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36), 0 0 16px rgba(217, 183, 106, 0.12) !important;
cursor: pointer;
transition: all 0.2s ease;
}
body[data-theme="tera-rising"] .settings-grid .profile-btn:hover {
background: linear-gradient(135deg, rgba(217, 183, 106, 0.42), rgba(91, 199, 255, 0.24)), rgba(10, 18, 42, 0.94) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.46), 0 0 24px rgba(217, 183, 106, 0.34) !important;
transform: translateY(-1px);
}
body[data-theme="tera-rising"] .settings-grid .profile-btn:active {
transform: translateY(0);
}
body[data-theme="tera-rising"] .role-choice-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px !important;
border-radius: 6px !important;
border: 1px solid rgba(217, 183, 106, 0.32) !important;
background: linear-gradient(135deg, rgba(217, 183, 106, 0.12), rgba(91, 199, 255, 0.05)), rgba(4, 8, 20, 0.68) !important;
color: #f8f3e8 !important;
font-family: var(--theme-font-display);
font-size: 0.78rem;
font-weight: 850;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5) !important;
}
body[data-theme="tera-rising"] .role-choice-btn:hover {
border-color: rgba(217, 183, 106, 0.72) !important;
background: linear-gradient(135deg, rgba(217, 183, 106, 0.22), rgba(91, 199, 255, 0.1)), rgba(10, 18, 42, 0.82) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 12px rgba(217, 183, 106, 0.24) !important;
transform: translateY(-1px);
}
body[data-theme="tera-rising"] .role-choice-btn.active {
border-color: rgba(91, 199, 255, 0.72) !important;
background: linear-gradient(135deg, rgba(91, 199, 255, 0.22), rgba(217, 183, 106, 0.08)), rgba(6, 15, 38, 0.90) !important;
box-shadow: 0 0 16px rgba(91, 199, 255, 0.38), inset 0 0 8px rgba(91, 199, 255, 0.18) !important;
}
/* Stretch Profile Roles to full width and layout buttons in a grid */
body[data-theme="tera-rising"] .settings-grid .setting-card:has(.self-role-choice) {
grid-column: 1 / -1;
}
body[data-theme="tera-rising"] .settings-grid .roles-choice-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
margin-top: 8px;
}
/* Confirm dialog — MMORPG premium button overrides */
body[data-theme="tera-rising"] #confirm-modal .likers-panel {
width: min(560px, calc(100vw - 32px));
overflow: visible;
}
body[data-theme="tera-rising"] #confirm-modal .likers-header {
min-height: 84px;
padding: 26px 32px 10px !important;
align-items: flex-start;
position: relative;
z-index: 4;
}
body[data-theme="tera-rising"] #confirm-modal .likers-header h3 {
font-size: clamp(1.35rem, 2.8vw, 1.65rem);
line-height: 1;
}
body[data-theme="tera-rising"] #confirm-modal .likers-close {
font-size: clamp(1.6rem, 3vw, 2rem);
line-height: 1;
padding: 0 !important;
}
body[data-theme="tera-rising"] #confirm-modal .likers-body {
position: relative;
z-index: 2;
}
body[data-theme="tera-rising"] #confirm-modal .panel-divider {
position: absolute;
left: 20%;
right: 20%;
top: -40px;
width: auto;
height: 100px;
z-index: 3;
pointer-events: none;
}
body[data-theme="tera-rising"] #confirm-modal .tera-divider-img {
object-fit: cover;
object-position: center 50%;
filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.46));
}
body[data-theme="tera-rising"] #confirm-modal .likers-body {
padding: 10px 32px 30px !important;
}
body[data-theme="tera-rising"] #confirm-modal #confirm-message {
max-width: 480px;
margin-left: auto;
margin-right: auto;
font-size: clamp(1rem, 2.2vw, 1.24rem);
color: #c8d4e8 !important;
line-height: 1.55;
margin-bottom: 26px !important;
letter-spacing: 0.01em;
}
body[data-theme="tera-rising"] #confirm-modal .likers-body>div {
gap: 18px !important;
}
/* Cancel — ghost silver */
body[data-theme="tera-rising"] #confirm-modal .profile-btn:not(#confirm-ok-btn) {
min-width: min(155px, 42vw);
min-height: 52px;
padding: 11px 22px !important;
border-radius: 6px !important;
border: 1px solid rgba(180, 200, 230, 0.28) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
rgba(12, 20, 42, 0.72) !important;
color: #b9c8e0 !important;
font-weight: 900;
font-size: clamp(0.95rem, 2vw, 1.15rem);
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 6px 18px rgba(0, 0, 0, .28) !important;
transition: all 0.2s ease;
}
body[data-theme="tera-rising"] #confirm-modal .profile-btn:not(#confirm-ok-btn):hover {
border-color: rgba(180, 200, 230, 0.54) !important;
background:
linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)),
rgba(18, 30, 60, 0.82) !important;
color: #e8f0ff !important;
transform: translateY(-2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 26px rgba(0, 0, 0, .34) !important;
}
/* Confirm — glowing danger red */
body[data-theme="tera-rising"] #confirm-ok-btn {
min-width: min(155px, 42vw);
min-height: 52px;
padding: 11px 22px !important;
border-radius: 6px !important;
border: 1px solid rgba(255, 80, 100, 0.52) !important;
background:
linear-gradient(180deg, rgba(255, 90, 110, .32), rgba(180, 28, 48, .22)),
linear-gradient(135deg, rgba(255, 60, 90, .18), rgba(140, 20, 42, .14)),
rgba(10, 4, 8, 0.86) !important;
color: #ffb8c0 !important;
font-weight: 900;
font-size: clamp(0.95rem, 2vw, 1.15rem);
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow:
inset 0 1px 0 rgba(255, 140, 160, .22),
0 0 18px rgba(255, 60, 90, .22),
0 8px 22px rgba(0, 0, 0, .36) !important;
transition: all 0.2s ease;
}
body[data-theme="tera-rising"] #confirm-ok-btn:hover {
border-color: rgba(255, 80, 100, 0.82) !important;
background:
linear-gradient(180deg, rgba(255, 100, 120, .46), rgba(200, 30, 56, .32)),
rgba(14, 4, 10, 0.92) !important;
color: #ffd0d8 !important;
transform: translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255, 160, 180, .28),
0 0 30px rgba(255, 60, 90, .38),
0 12px 28px rgba(0, 0, 0, .44) !important;
}
body[data-theme="tera-rising"] #confirm-ok-btn:active,
body[data-theme="tera-rising"] #confirm-modal .profile-btn:not(#confirm-ok-btn):active {
transform: translateY(0) !important;
}
body[data-theme="tera-rising"] .event-carousel-shell {
position: relative !important;
width: 100% !important;
overflow: hidden !important;
}
body[data-theme="tera-rising"] .event-carousel-shell .event-carousel,
body[data-theme="tera-rising"] .event-carousel-shell .carousel {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
overflow: -moz-scrollbars-none !important;
}
body[data-theme="tera-rising"] .event-carousel-shell .event-carousel::-webkit-scrollbar,
body[data-theme="tera-rising"] .event-carousel-shell .carousel::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
body[data-theme="tera-rising"] .event-carousel-nav,
body[data-theme="tera-rising"] #archive-carousel + .event-carousel-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
transform: translateY(-50%) !important;
z-index: 180 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 4px !important;
}
body[data-theme="tera-rising"] .event-carousel-nav-btn {
pointer-events: auto !important;
width: 44px !important;
height: 44px !important;
border: 1.5px solid rgba(217, 183, 106, 0.85) !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(217, 183, 106, 0.35), rgba(5, 9, 22, 0.94)) !important;
color: #fff2b7 !important;
font-size: 1.6rem !important;
font-weight: 1000 !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), 0 0 20px rgba(217, 183, 106, 0.45) !important;
backdrop-filter: blur(8px) !important;
transition: transform 0.18s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.18s ease !important;
}
body[data-theme="tera-rising"] .event-carousel-nav-btn:hover {
transform: scale(1.1) !important;
border-color: #fff2b7 !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.85), 0 0 28px rgba(217, 183, 106, 0.75) !important;
}
@media (max-width: 900px) {
html:has(body[data-theme="tera-rising"]) {
background:
linear-gradient(180deg, rgba(2, 5, 14, .26), rgba(2, 5, 14, .70)),
url("/assets/tera-theme/tera-bg-hero.png") center top / cover no-repeat,
#050814 !important;
}
body[data-theme="tera-rising"] {
background:
linear-gradient(180deg, rgba(2, 5, 14, .18), rgba(2, 5, 14, .66)),
url("/assets/tera-theme/tera-bg-hero.png") center top / cover no-repeat,
#050814 !important;
}
body[data-theme="tera-rising"]::before {
background:
linear-gradient(180deg, rgba(2, 5, 14, .08), rgba(2, 5, 14, .36)),
url("/assets/tera-theme/tera-bg-hero.png") center top / cover no-repeat !important;
opacity: .78 !important;
mix-blend-mode: normal !important;
}
body[data-theme="tera-rising"] .shell {
padding: 10px 8px 34px !important;
background: transparent !important;
}
body[data-theme="tera-rising"] .section-title {
margin: 22px 0 12px !important;
justify-content: center;
font-size: .9rem;
letter-spacing: .10em;
}
body[data-theme="tera-rising"] .hero {
display: block !important;
min-height: 0 !important;
padding: 14px 10px 12px !important;
border-radius: 14px !important;
overflow: hidden !important;
background:
linear-gradient(180deg, rgba(5, 9, 22, .52), rgba(4, 8, 20, .46)),
url("/assets/tera-theme/tera-bg-hero.png") center top / cover no-repeat !important;
}
body[data-theme="tera-rising"] .hero-copy {
min-height: 0 !important;
padding: 6px 2px 12px !important;
}
body[data-theme="tera-rising"] .hero-title {
width: 100% !important;
max-width: 100% !important;
font-size: clamp(1.58rem, 7.4vw, 2.08rem) !important;
line-height: 1 !important;
}
body[data-theme="tera-rising"] .hero-title::after {
bottom: -9px !important;
height: 5px !important;
opacity: .72;
}
body[data-theme="tera-rising"] .hero-note {
margin-top: 12px !important;
font-size: .78rem !important;
}
body[data-theme="tera-rising"] .hero-actions,
body[data-theme="tera-rising"] .station-actions {
margin-top: 10px !important;
}
body[data-theme="tera-rising"] .hero-media {
display: block !important;
min-height: 0 !important;
padding: 6px 0 0 !important;
transform: none !important;
}
body[data-theme="tera-rising"] .hero-media::before,
body[data-theme="tera-rising"] .hero-media::after,
body[data-theme="tera-rising"] #archive-stack::before,
body[data-theme="tera-rising"] #archive-stack::after {
content: none !important;
}
body[data-theme="tera-rising"] .mobile-family-group {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 12px 10px 14px !important;
margin-bottom: 20px !important;
border-radius: 20px !important;
border: 1px solid rgba(217, 183, 106, 0.35) !important;
background: linear-gradient(180deg, rgba(14, 23, 42, 0.88), rgba(8, 14, 28, 0.94)) !important;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 235, 170, 0.12) !important;
position: relative !important;
overflow: hidden !important;
}
body[data-theme="tera-rising"] .mobile-family-group .leaderboard-section-header {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 4px 6px 8px !important;
margin-bottom: 2px !important;
}
body[data-theme="tera-rising"] #current-carousel,
body[data-theme="tera-rising"] #archive-carousel {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 0 2px !important;
padding: 4px 10px 4px !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
scroll-padding-inline: 14px !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
body[data-theme="tera-rising"] #archive-carousel::-webkit-scrollbar {
display: none;
}
body[data-theme="tera-rising"] #archive-carousel {
margin-bottom: 2px !important;
}
body[data-theme="tera-rising"] #current-carousel .carousel-item {
display: none !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
align-self: center !important;
flex: 0 0 min(84vw, 360px) !important;
min-width: 0 !important;
min-height: auto !important;
padding: 16px 12px 14px !important;
border: 0 !important;
border-radius: 0 !important;
background: url("/assets/tera-theme/tera-ui-carousel-card-frame-off-with-background.png") center / 100% 100% no-repeat !important;
box-shadow: none !important;
scroll-snap-align: center !important;
transform: none !important;
}
body[data-theme="tera-rising"] #current-carousel .carousel-item.active,
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 10px !important;
align-items: center !important;
position: relative !important;
flex-basis: min(88vw, 390px) !important;
min-width: 0 !important;
min-height: 285px !important;
height: 285px !important;
padding: 44px 22px 42px !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body[data-theme="tera-rising"] #current-carousel .carousel-item.active::before,
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
background: url("/assets/tera-theme/tera-ui-carousel-card-frame-on-with-background.png") center / 100% 100% no-repeat !important;
opacity: 1 !important;
pointer-events: none !important;
}
body[data-theme="tera-rising"] #current-carousel .carousel-pick {
display: none !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-pick {
min-height: 0 !important;
padding: 0 12px 6px !important;
margin-top: 4px !important;
transform: none !important;
text-align: center !important;
pointer-events: none !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-year {
display: none !important;
}
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active strong {
font-size: clamp(1.22rem, 7vw, 1.62rem) !important;
line-height: .95 !important;
white-space: nowrap !important;
}
body[data-theme="tera-rising"] #current-carousel .carousel-actions,
body[data-theme="tera-rising"] #archive-carousel .carousel-actions {
display: none !important;
width: min(100%, 332px) !important;
max-width: 100% !important;
gap: 6px !important;
margin: 0 auto !important;
padding: 0 !important;
transform: none !important;
}
body[data-theme="tera-rising"] #current-carousel .carousel-item.active .carousel-actions,
body[data-theme="tera-rising"] #archive-carousel .carousel-item.active .carousel-actions {
display: grid !important;
}
body[data-theme="tera-rising"] #current-carousel .event-mode-tabs,
body[data-theme="tera-rising"] #archive-carousel .event-mode-tabs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn,
body[data-theme="tera-rising"] #archive-carousel .mode-btn,
body[data-theme="tera-rising"] #current-carousel .board-link-btn,
body[data-theme="tera-rising"] #archive-carousel .board-link-btn {
width: 100% !important;
height: 50px !important;
min-height: 50px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
color: transparent !important;
font-size: 0 !important;
letter-spacing: 0 !important;
text-shadow: none !important;
background-color: transparent !important;
background-position: center !important;
background-size: 100% 100% !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn[data-mode="group"],
body[data-theme="tera-rising"] #archive-carousel .mode-btn[data-mode="group"] {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-group-off.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn[data-mode="group"].active,
body[data-theme="tera-rising"] #archive-carousel .mode-btn[data-mode="group"].active {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-group.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn[data-mode="solo"],
body[data-theme="tera-rising"] #archive-carousel .mode-btn[data-mode="solo"] {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-solo-off.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .mode-btn[data-mode="solo"].active,
body[data-theme="tera-rising"] #archive-carousel .mode-btn[data-mode="solo"].active {
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-solo.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-carousel .board-link-btn,
body[data-theme="tera-rising"] #archive-carousel .board-link-btn {
justify-self: center !important;
width: min(230px, 78%) !important;
height: 57px !important;
min-height: 57px !important;
background-image: url("/assets/tera-theme/tera-ui-carousel-btn-class-compare.png?v=trim-2") !important;
}
body[data-theme="tera-rising"] #current-stack,
body[data-theme="tera-rising"] #archive-stack {
margin-top: 0 !important;
min-height: 0 !important;
padding: 0 !important;
background: transparent !important;
background-image: none !important;
}
body[data-theme="tera-rising"] #archive-stack {
padding: 0 4px 14px !important;
}
body[data-theme="tera-rising"] #current-stack .event-panel,
body[data-theme="tera-rising"] #archive-stack .event-panel {
padding: 0 !important;
border-radius: 0 !important;
overflow: visible !important;
background: transparent !important;
background-image: none !important;
}
body[data-theme="tera-rising"] #current-stack .leaderboard-card,
body[data-theme="tera-rising"] #archive-stack .leaderboard-card {
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
background-image: none !important;
overflow: visible !important;
}
body[data-theme="tera-rising"] #current-stack .board-head,
body[data-theme="tera-rising"] #archive-stack .board-head {
display: none !important;
}
body[data-theme="tera-rising"] #current-stack .lb-scroll,
body[data-theme="tera-rising"] #archive-stack .lb-scroll {
max-height: none !important;
padding: 0 !important;
overflow: visible !important;
}
body[data-theme="tera-rising"] #current-stack .group-card,
body[data-theme="tera-rising"] #archive-stack .group-card {
position: relative !important;
isolation: isolate !important;
margin: 0 0 8px !important;
padding: 9px !important;
border-radius: 12px !important;
border: 1px solid rgba(217, 183, 106, .38) !important;
background:
radial-gradient(circle at 16% 0%, rgba(91, 199, 255, .18), transparent 40%),
linear-gradient(90deg, rgba(217, 183, 106, .13), transparent 42%),
linear-gradient(180deg, rgba(12, 20, 44, .92), rgba(4, 8, 20, .97)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .08),
0 10px 24px rgba(0, 0, 0, .26) !important;
overflow: hidden !important;
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-1,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-1 {
background:
linear-gradient(90deg, rgba(255, 226, 138, .42), rgba(24, 28, 40, .78) 42%, rgba(8, 13, 28, .96)) !important;
border-color: rgba(255, 226, 138, .92) !important;
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-2,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-2 {
background:
linear-gradient(90deg, rgba(185, 231, 255, .32), rgba(18, 28, 42, .78) 42%, rgba(8, 13, 28, .96)) !important;
border-color: rgba(185, 231, 255, .74) !important;
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-3,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-3 {
background:
linear-gradient(90deg, rgba(255, 170, 96, .30), rgba(35, 24, 20, .74) 42%, rgba(8, 13, 28, .96)) !important;
border-color: rgba(255, 170, 96, .72) !important;
}
body[data-theme="tera-rising"] #current-stack .group-head,
body[data-theme="tera-rising"] #archive-stack .group-head {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 8px !important;
margin: 0 0 7px !important;
}
body[data-theme="tera-rising"] #current-stack .group-rank,
body[data-theme="tera-rising"] #archive-stack .group-rank,
body[data-theme="tera-rising"] .group-rank {
min-width: 52px !important;
white-space: nowrap !important;
font-size: 1.25rem !important;
font-weight: 1000 !important;
line-height: 1 !important;
}
body[data-theme="tera-rising"] #current-stack .group-time,
body[data-theme="tera-rising"] #archive-stack .group-time {
font-size: .98rem !important;
text-align: left !important;
}
body[data-theme="tera-rising"] #current-stack .group-region,
body[data-theme="tera-rising"] #archive-stack .group-region {
font-size: .78rem !important;
}
body[data-theme="tera-rising"] #current-stack .member-stack,
body[data-theme="tera-rising"] #archive-stack .member-stack {
gap: 5px !important;
}
body[data-theme="tera-rising"] #current-stack .member-row,
body[data-theme="tera-rising"] #archive-stack .member-row,
body[data-theme="tera-rising"] .member-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
min-height: 30px !important;
padding: 6px 10px !important;
border-radius: 10px !important;
border: 1px solid rgba(217, 183, 106, .24) !important;
background: linear-gradient(90deg, rgba(5, 9, 22, .78), rgba(10, 17, 38, .68)) !important;
font-size: .84rem !important;
}
body[data-theme="tera-rising"] #current-stack .member-row span,
body[data-theme="tera-rising"] #archive-stack .member-row span,
body[data-theme="tera-rising"] .member-row span {
font-size: 0.76rem !important;
font-weight: 900 !important;
color: #b9c3d8 !important;
background: rgba(255, 255, 255, 0.06) !important;
padding: 2px 6px !important;
border-radius: 4px !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
body[data-theme="tera-rising"] #current-stack .member-row strong,
body[data-theme="tera-rising"] #archive-stack .member-row strong,
body[data-theme="tera-rising"] .member-row strong {
font-weight: 1000 !important;
color: #ffffff !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
word-break: break-word !important;
letter-spacing: 0.02em !important;
}
body[data-theme="tera-rising"] .group-card:not(.solo-card) .member-row em {
display: none !important;
}
body[data-theme="tera-rising"] .solo-card .member-row em {
display: block !important;
width: 100% !important;
flex-basis: 100% !important;
font-style: normal !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
color: #d9b76a !important;
opacity: 0.88 !important;
white-space: normal !important;
word-break: break-word !important;
margin-top: 1px !important;
}
body[data-theme="tera-rising"] #current-stack .class-toolbar,
body[data-theme="tera-rising"] #archive-stack .class-toolbar {
gap: 8px !important;
padding-bottom: 8px !important;
}
body[data-theme="tera-rising"] #current-stack .class-btn,
body[data-theme="tera-rising"] #archive-stack .class-btn {
flex-basis: 112px !important;
min-height: 38px !important;
border-radius: 10px !important;
padding: 8px 10px !important;
font-size: .76rem !important;
}
}
@media (max-width: 900px) {
body[data-theme="tera-rising"] #current-stack .group-card,
body[data-theme="tera-rising"] #archive-stack .group-card {
padding: 0 !important;
margin: 0 0 6px !important;
border-radius: 12px !important;
border-width: 1px !important;
background: rgba(7, 12, 28, .86) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
body[data-theme="tera-rising"] #current-stack .group-head,
body[data-theme="tera-rising"] #archive-stack .group-head {
margin: 0 !important;
padding: 8px 10px !important;
border-radius: 11px 11px 0 0 !important;
background: linear-gradient(90deg, rgba(217, 183, 106, .14), rgba(255, 255, 255, .035)) !important;
border-bottom: 1px solid rgba(217, 183, 106, .18);
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-1 .group-head,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-1 .group-head {
background: linear-gradient(90deg, rgba(255, 226, 138, .58), rgba(255, 226, 138, .18) 42%, rgba(7, 12, 28, .82)) !important;
border-bottom-color: rgba(255, 226, 138, .72);
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-2 .group-head,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-2 .group-head {
background: linear-gradient(90deg, rgba(185, 231, 255, .44), rgba(185, 231, 255, .16) 42%, rgba(7, 12, 28, .82)) !important;
border-bottom-color: rgba(185, 231, 255, .62);
}
body[data-theme="tera-rising"] #current-stack .group-card.rank-3 .group-head,
body[data-theme="tera-rising"] #archive-stack .group-card.rank-3 .group-head {
background: linear-gradient(90deg, rgba(255, 170, 96, .40), rgba(255, 170, 96, .14) 42%, rgba(7, 12, 28, .82)) !important;
border-bottom-color: rgba(255, 170, 96, .58);
}
body[data-theme="tera-rising"] #current-stack .member-stack,
body[data-theme="tera-rising"] #archive-stack .member-stack {
gap: 0 !important;
padding: 4px !important;
}
body[data-theme="tera-rising"] #current-stack .member-row,
body[data-theme="tera-rising"] #archive-stack .member-row {
min-height: 26px !important;
padding: 4px 6px !important;
border-radius: 7px !important;
border: 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, .045) !important;
background: linear-gradient(90deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)) !important;
}
body[data-theme="tera-rising"] #current-stack .member-row:last-child,
body[data-theme="tera-rising"] #archive-stack .member-row:last-child {
border-bottom: 0 !important;
}
}
@media (max-width: 900px) {
body[data-theme="tera-rising"] .global-chat {
margin-top: 36px !important;
overflow: visible !important;
}
body[data-theme="tera-rising"] .global-chat::after {
top: -34px !important;
z-index: 30 !important;
width: min(286px, calc(100% - 34px)) !important;
height: 76px !important;
background-size: 100% auto !important;
}
body[data-theme="tera-rising"] .global-chat .chat-head {
padding-top: 34px !important;
}
}
/* ==========================================================================
TERA Rising Complete Mobile Overhaul (Esports App-Native UX)
========================================================================== */
@media (max-width: 768px) {
/* Shell & Page Container */
body .shell,
.shell {
padding-bottom: 78px !important;
padding-inline: 10px !important;
}
/* Mobile Sticky Bottom Navigation Bar */
body .mobile-bottom-nav,
.mobile-bottom-nav {
display: flex !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 58px !important;
background: color-mix(in srgb, var(--panel) 98%, black) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-top: 1px solid var(--accent-a42) !important;
z-index: 999999 !important;
justify-content: space-around !important;
align-items: center !important;
padding: 0 6px !important;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.85) !important;
pointer-events: none !important;
}
.mobile-bottom-nav a,
.mobile-bottom-nav button {
pointer-events: auto !important;
}
/* Mobile Floating Widgets Alignment */
body .persistent-music-dock,
body .shell-mascot,
body .shell-crystal,
body .dm-dock,
.persistent-music-dock,
.shell-mascot,
.shell-crystal,
.dm-dock {
bottom: 64px !important;
z-index: 999990 !important;
}
/* APNG Animated Mascot Cat Widget (Walks on border-top of navbar) */
body .mascot-widget,
.mascot-widget {
bottom: 58px !important;
z-index: 1000000 !important;
}
/* Mascot AI Chat Drawer & Textbox */
body .mascot-chat-drawer,
.mascot-chat-drawer {
bottom: 68px !important;
z-index: 1000005 !important;
}
/* Mobile Fullscreen Chat & Emoji Panel Alignment */
body[data-theme="tera-rising"] .global-chat.fullscreen,
body .global-chat.fullscreen,
.global-chat.fullscreen {
position: fixed !important;
inset: 10px 10px 58px 10px !important;
z-index: 1000000 !important;
border-radius: 18px 18px 0 0 !important;
pointer-events: auto !important;
}
body[data-theme="tera-rising"] #chat-emoji-panel,
body #chat-emoji-panel,
#chat-emoji-panel {
position: fixed !important;
bottom: 58px !important;
z-index: 1000005 !important;
pointer-events: auto !important;
}
body[data-theme="tera-rising"] .global-chat,
body .global-chat,
.global-chat {
margin-bottom: 68px !important;
pointer-events: auto !important;
}
body .chat-compose,
.chat-compose {
pointer-events: auto !important;
position: relative !important;
z-index: 1000002 !important;
}
.mobile-bottom-nav a,
.mobile-bottom-nav button {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
color: #98a5bd !important;
font-size: 0.68rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
gap: 3px !important;
padding: 4px 10px !important;
transition: color 0.2s ease, transform 0.15s ease !important;
}
.mobile-bottom-nav a span,
.mobile-bottom-nav button span {
font-size: 1.2rem !important;
line-height: 1 !important;
}
.mobile-nav-avatar {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
object-fit: cover !important;
border: 1px solid var(--accent) !important;
margin-bottom: 2px !important;
}
.mobile-bottom-nav a.active,
.mobile-bottom-nav button.active,
.mobile-bottom-nav a:active,
.mobile-bottom-nav button:active {
color: var(--accent) !important;
transform: translateY(-1px) !important;
text-shadow: 0 0 12px var(--accent-a70) !important;
}
/* Mobile Topbar */
body[data-theme="tera-rising"] .topbar {
padding: 10px 14px !important;
border-radius: 16px !important;
margin-bottom: 14px !important;
background: linear-gradient(135deg, rgba(8, 14, 31, 0.92), rgba(5, 8, 18, 0.95)) !important;
border: 1px solid rgba(217, 183, 106, 0.25) !important;
}
body[data-theme="tera-rising"] .topbar .brand {
font-size: 1.2rem !important;
font-weight: 1000 !important;
letter-spacing: 0.08em !important;
color: #f8f3e8 !important;
background: linear-gradient(135deg, #ffffff 40%, #d9b76a 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
body[data-theme="tera-rising"] .topbar .nav {
display: none !important;
}
/* Hero Section Mobile Compact */
body[data-theme="tera-rising"] .hero {
grid-template-columns: 1fr !important;
padding: 16px 14px !important;
gap: 14px !important;
border-radius: 18px !important;
border: 1px solid rgba(217, 183, 106, 0.2) !important;
background: linear-gradient(180deg, rgba(8, 14, 31, 0.94), rgba(4, 7, 15, 0.96)) !important;
}
body[data-theme="tera-rising"] .hero-title {
font-size: 1.65rem !important;
line-height: 1.05 !important;
letter-spacing: 0.02em !important;
}
body[data-theme="tera-rising"] .eyebrow {
font-size: 0.75rem !important;
letter-spacing: 0.14em !important;
color: #d9b76a !important;
}
body[data-theme="tera-rising"] .hero-actions-row {
margin-top: 10px !important;
gap: 8px !important;
flex-direction: column !important;
}
body[data-theme="tera-rising"] .btn-neon-electric,
body[data-theme="tera-rising"] .hero-cta {
width: 100% !important;
min-height: 44px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 0.88rem !important;
border-radius: 14px !important;
}
/* Banners & Headers */
body[data-theme="tera-rising"] .current-leaderboards-section {
padding: 12px 10px !important;
margin: 16px 0 !important;
border-radius: 18px !important;
background: rgba(5, 8, 18, 0.96) !important;
border: 1px solid rgba(217, 183, 106, 0.35) !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7) !important;
}
/* Live Season Banner Header on Mobile */
body[data-theme="tera-rising"] .current-leaderboards-header.tera-rising-banner {
padding: 20px 16px 18px !important;
border-radius: 22px !important;
margin-bottom: 18px !important;
background: linear-gradient(135deg, rgba(20, 32, 58, 0.96), rgba(8, 14, 30, 0.98)) !important;
border: 1px solid rgba(217, 183, 106, 0.45) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(91, 199, 255, 0.15), inset 0 1px 0 rgba(255, 235, 170, 0.2) !important;
position: relative !important;
overflow: hidden !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .tera-badge-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
align-items: center !important;
margin-bottom: 8px !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .tera-live-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: linear-gradient(135deg, rgba(255, 75, 110, 0.22), rgba(255, 0, 60, 0.12)) !important;
border: 1px solid rgba(255, 75, 110, 0.5) !important;
border-radius: 999px !important;
padding: 4px 10px !important;
font-size: 0.72rem !important;
font-weight: 1000 !important;
color: #ff6b8b !important;
letter-spacing: 0.08em !important;
box-shadow: 0 0 12px rgba(255, 75, 110, 0.25) !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .live-pulse-dot {
width: 7px !important;
height: 7px !important;
border-radius: 50% !important;
background: #ff3b60 !important;
box-shadow: 0 0 8px #ff3b60 !important;
animation: livePulseDot 1.4s ease-in-out infinite alternate !important;
}
@keyframes livePulseDot {
from { opacity: 0.4; transform: scale(0.8); }
to { opacity: 1; transform: scale(1.2); }
}
body[data-theme="tera-rising"] .current-leaderboards-header .tera-event-badge {
display: inline-flex !important;
align-items: center !important;
background: linear-gradient(135deg, rgba(217, 183, 106, 0.22), rgba(139, 96, 40, 0.12)) !important;
border: 1px solid rgba(217, 183, 106, 0.5) !important;
border-radius: 999px !important;
padding: 4px 10px !important;
font-size: 0.72rem !important;
font-weight: 1000 !important;
color: #ffe28a !important;
letter-spacing: 0.06em !important;
box-shadow: 0 0 12px rgba(217, 183, 106, 0.2) !important;
}
body[data-theme="tera-rising"] .leaderboard-section-header.tera-rising-banner {
padding: 10px 12px 10px !important;
border-radius: 16px !important;
margin-bottom: 6px !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header.tera-rising-banner {
padding: 12px 12px 12px !important;
border-radius: 16px !important;
margin-bottom: 6px !important;
background: linear-gradient(135deg, rgba(20, 32, 58, 0.96), rgba(8, 14, 30, 0.98)) !important;
border: 1px solid rgba(217, 183, 106, 0.45) !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.75), 0 0 32px rgba(91, 199, 255, 0.15), inset 0 1px 0 rgba(255, 235, 170, 0.2) !important;
position: relative !important;
overflow: hidden !important;
}
body[data-theme="tera-rising"] .tera-section-title {
font-family: Cinzel, Georgia, "Times New Roman", serif !important;
font-size: clamp(1.05rem, 4.4vw, 1.25rem) !important;
font-weight: 1000 !important;
margin: 4px 0 8px !important;
letter-spacing: 0.04em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
background: linear-gradient(180deg, #ffffff 0%, #ffe28a 45%, #d9b76a 75%, #8b6028 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
color: transparent !important;
-webkit-text-stroke: 1px rgba(45, 28, 10, 0.4) !important;
text-shadow: 0 2px 14px rgba(217, 183, 106, 0.4), 0 0 24px rgba(91, 199, 255, 0.2) !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .tera-actions-row {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin-top: 10px !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .event-mode-tabs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .mode-btn {
width: 100% !important;
min-height: 44px !important;
padding: 10px 14px !important;
font-size: 0.92rem !important;
font-weight: 1000 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: 12px !important;
border: 1px solid rgba(217, 183, 106, 0.35) !important;
background: linear-gradient(135deg, rgba(217, 183, 106, 0.1), rgba(4, 8, 20, 0.85)) !important;
color: #c9d5ea !important;
transition: all 0.18s ease !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .mode-btn.active {
border-color: rgba(217, 183, 106, 0.85) !important;
background: linear-gradient(135deg, rgba(217, 183, 106, 0.38), rgba(12, 22, 42, 0.95)) !important;
color: #ffe28a !important;
box-shadow: 0 4px 18px rgba(217, 183, 106, 0.3), inset 0 1px 0 rgba(255, 235, 170, 0.3) !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .carousel-compare-actions {
width: 100% !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .event-compare-link {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 46px !important;
padding: 12px 18px !important;
font-size: 0.92rem !important;
font-weight: 1000 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
border-radius: 14px !important;
border: 1px solid rgba(91, 199, 255, 0.6) !important;
background: linear-gradient(135deg, rgba(91, 199, 255, 0.22), rgba(168, 85, 247, 0.22), rgba(4, 8, 20, 0.95)) !important;
color: #ffffff !important;
box-shadow: 0 8px 24px rgba(91, 199, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
transition: all 0.18s ease !important;
}
body[data-theme="tera-rising"] .current-leaderboards-header .event-compare-link:active {
transform: scale(0.97) !important;
box-shadow: 0 4px 14px rgba(91, 199, 255, 0.4) !important;
}
/* Class Filter Rail Touch Swiper */
body[data-theme="tera-rising"] .class-rail-wrap {
margin-bottom: 14px !important;
gap: 6px !important;
align-items: center !important;
}
body[data-theme="tera-rising"] .class-toolbar {
padding: 4px 2px !important;
gap: 8px !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
}
body[data-theme="tera-rising"] .class-btn {
flex: 0 0 96px !important;
min-height: 40px !important;
font-size: 0.78rem !important;
font-weight: 900 !important;
border-radius: 12px !important;
padding: 8px 6px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
body[data-theme="tera-rising"] .class-btn.active {
background: rgba(217, 183, 106, 0.22) !important;
border-color: #d9b76a !important;
color: #ffffff !important;
box-shadow: 0 0 16px rgba(217, 183, 106, 0.3) !important;
}
body[data-theme="tera-rising"] .class-nav-btn {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
font-size: 1.1rem !important;
border-radius: 999px !important;
border: 1px solid rgba(217, 183, 106, 0.3) !important;
background: rgba(0, 0, 0, 0.5) !important;
}
/* Mobile Group Cards Styling */
body[data-theme="tera-rising"] .group-card {
padding: 12px 14px !important;
margin-bottom: 12px !important;
border-radius: 16px !important;
border: 1px solid rgba(217, 183, 106, 0.25) !important;
background: linear-gradient(135deg, rgba(14, 23, 42, 0.95), rgba(8, 14, 30, 0.98)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}
body[data-theme="tera-rising"] .group-head {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 10px !important;
padding-bottom: 8px !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body[data-theme="tera-rising"] .group-rank {
font-size: 1.3rem !important;
font-weight: 1000 !important;
min-width: 44px !important;
color: #d9b76a !important;
}
body[data-theme="tera-rising"] .group-time {
font-size: 1.05rem !important;
font-weight: 1000 !important;
color: #5bc7ff !important;
}
body[data-theme="tera-rising"] .group-region {
font-size: 0.8rem !important;
font-weight: 800 !important;
color: #b9c3d8 !important;
}
body[data-theme="tera-rising"] .member-stack {
display: grid !important;
gap: 6px !important;
}
body[data-theme="tera-rising"] .member-row {
display: grid !important;
grid-template-columns: 90px 1fr 1fr !important;
gap: 8px !important;
align-items: center !important;
padding: 6px 10px !important;
border-radius: 10px !important;
font-size: 0.8rem !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.04) !important;
}
/* Solo & Group Cards App-Native Layout */
body[data-theme="tera-rising"] .leaderboard-card::before,
body[data-theme="tera-rising"] .leaderboard-card::after,
body[data-theme="tera-rising"] .event-panel::before,
body[data-theme="tera-rising"] .event-panel::after,
body[data-theme="tera-rising"] .event-mode::before,
body[data-theme="tera-rising"] .event-mode::after,
body[data-theme="tera-rising"] .board-card-overlay,
body[data-theme="tera-rising"] .tera-lava-card-frame,
.board-card-overlay,
.tera-lava-card-frame,
.leaderboard-card::before,
.leaderboard-card::after {
display: none !important;
content: none !important;
background: none !important;
opacity: 0 !important;
}
body[data-theme="tera-rising"] .leaderboard-card,
body[data-theme="tera-rising"] .event-stack,
body[data-theme="tera-rising"] .event-panel,
body[data-theme="tera-rising"] .event-mode {
padding: 0 !important;
margin: 0 0 4px 0 !important;
border-radius: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
min-height: auto !important;
}
/* Horizontal Touch Swiper Rail for Solo & Group Leaderboard Cards */
body[data-theme="tera-rising"] #current-stack .lb-scroll,
body[data-theme="tera-rising"] #archive-stack .lb-scroll,
body[data-theme="tera-rising"] .lb-scroll {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: 12px !important;
padding: 6px 4px 16px 4px !important;
max-height: none !important;
min-height: auto !important;
scrollbar-width: thin !important;
scrollbar-color: #d9b76a rgba(10, 16, 30, 0.6) !important;
}
body[data-theme="tera-rising"] #current-stack .group-card,
body[data-theme="tera-rising"] #archive-stack .group-card,
body[data-theme="tera-rising"] .group-card {
flex: 0 0 min(310px, 84vw) !important;
width: min(310px, 84vw) !important;
scroll-snap-align: center !important;
scroll-snap-stop: always !important;
margin: 0 !important;
}
body[data-theme="tera-rising"] .table-wrap,
body[data-theme="tera-rising"] #archive-stack .table-wrap {
max-height: none !important;
overflow: visible !important;
}
body[data-theme="tera-rising"] .table-wrap tbody,
body[data-theme="tera-rising"] #archive-stack .table-wrap tbody {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
scroll-padding-inline: 14px !important;
-webkit-overflow-scrolling: touch !important;
gap: 12px !important;
padding: 6px 4px 16px 4px !important;
scrollbar-width: thin !important;
scrollbar-color: #d9b76a rgba(10, 16, 30, 0.6) !important;
}
body[data-theme="tera-rising"] #archive-stack .lb-scroll::-webkit-scrollbar,
body[data-theme="tera-rising"] #archive-stack .table-wrap tbody::-webkit-scrollbar,
body[data-theme="tera-rising"] .lb-scroll::-webkit-scrollbar,
body[data-theme="tera-rising"] .table-wrap tbody::-webkit-scrollbar {
height: 5px !important;
width: auto !important;
}
body[data-theme="tera-rising"] #archive-stack .lb-scroll::-webkit-scrollbar-track,
body[data-theme="tera-rising"] #archive-stack .table-wrap tbody::-webkit-scrollbar-track,
body[data-theme="tera-rising"] .lb-scroll::-webkit-scrollbar-track,
body[data-theme="tera-rising"] .table-wrap tbody::-webkit-scrollbar-track {
background: rgba(10, 16, 30, 0.5) !important;
border-radius: 4px !important;
}
body[data-theme="tera-rising"] #archive-stack .lb-scroll::-webkit-scrollbar-thumb,
body[data-theme="tera-rising"] #archive-stack .table-wrap tbody::-webkit-scrollbar-thumb,
body[data-theme="tera-rising"] .lb-scroll::-webkit-scrollbar-thumb,
body[data-theme="tera-rising"] .table-wrap tbody::-webkit-scrollbar-thumb {
background: #d9b76a !important;
border-radius: 4px !important;
}
body[data-theme="tera-rising"] #current-stack .table-wrap table,
body[data-theme="tera-rising"] #archive-stack .table-wrap table,
body[data-theme="tera-rising"] .table-wrap table {
display: block !important;
min-width: 0 !important;
width: max-content !important;
}
body[data-theme="tera-rising"] #archive-stack .table-wrap thead,
body[data-theme="tera-rising"] .table-wrap thead {
display: none !important;
}
body[data-theme="tera-rising"] #archive-stack .table-wrap tr,
body[data-theme="tera-rising"] #current-stack .table-wrap tr,
body[data-theme="tera-rising"] .table-wrap tr {
flex: 0 0 min(290px, 82vw) !important;
width: min(290px, 82vw) !important;
scroll-snap-align: center !important;
scroll-snap-stop: always !important;
position: relative !important;
margin: 0 !important;
padding: 14px 16px 14px 64px !important;
border-radius: 18px !important;
background: linear-gradient(135deg, rgba(20, 32, 58, 0.95), rgba(8, 14, 30, 0.98)) !important;
border: 1px solid rgba(217, 183, 106, 0.35) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 20px rgba(91, 199, 255, 0.08) !important;
backdrop-filter: blur(12px) !important;
transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
body[data-theme="tera-rising"] .table-wrap tr:active {
transform: scale(0.97) !important;
}
/* Rank positions */
body[data-theme="tera-rising"] #current-stack .table-wrap tr.rank-1,
body[data-theme="tera-rising"] #archive-stack .table-wrap tr.rank-1,
body[data-theme="tera-rising"] .table-wrap tr.rank-1 {
border-color: rgba(255, 214, 107, 0.85) !important;
background: linear-gradient(135deg, rgba(255, 214, 107, 0.22), rgba(14, 22, 42, 0.98)) !important;
box-shadow: inset 0 1px 0 rgba(255, 235, 170, 0.25), 0 0 24px rgba(255, 214, 107, 0.4) !important;
}
body[data-theme="tera-rising"] #current-stack .table-wrap tr.rank-2,
body[data-theme="tera-rising"] #archive-stack .table-wrap tr.rank-2,
body[data-theme="tera-rising"] .table-wrap tr.rank-2 {
border-color: rgba(185, 231, 255, 0.75) !important;
background: linear-gradient(135deg, rgba(185, 231, 255, 0.18), rgba(12, 20, 38, 0.98)) !important;
box-shadow: inset 0 1px 0 rgba(220, 245, 255, 0.2), 0 0 20px rgba(185, 231, 255, 0.3) !important;
}
body[data-theme="tera-rising"] #current-stack .table-wrap tr.rank-3,
body[data-theme="tera-rising"] #archive-stack .table-wrap tr.rank-3,
body[data-theme="tera-rising"] .table-wrap tr.rank-3 {
border-color: rgba(255, 170, 96, 0.75) !important;
background: linear-gradient(135deg, rgba(255, 170, 96, 0.18), rgba(20, 16, 24, 0.98)) !important;
box-shadow: inset 0 1px 0 rgba(255, 200, 150, 0.2), 0 0 20px rgba(255, 170, 96, 0.3) !important;
}
body[data-theme="tera-rising"] .table-wrap td {
padding: 2px 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Rank Badge - Double-Digit Support (#10, #12, #20) */
body[data-theme="tera-rising"] #current-stack .table-wrap td:nth-child(1),
body[data-theme="tera-rising"] #archive-stack .table-wrap td:nth-child(1),
body[data-theme="tera-rising"] .table-wrap td:nth-child(1) {
position: absolute !important;
left: 6px !important;
top: 14px !important;
font-size: 1.3rem !important;
font-weight: 1000 !important;
width: 52px !important;
min-width: 52px !important;
white-space: nowrap !important;
text-align: center !important;
color: #d9b76a !important;
text-shadow: 0 0 12px rgba(217, 183, 106, 0.5) !important;
}
body[data-theme="tera-rising"] .table-wrap tr.rank-1 td:nth-child(1) { color: #ffe28a !important; }
body[data-theme="tera-rising"] .table-wrap tr.rank-2 td:nth-child(1) { color: #b9e7ff !important; }
body[data-theme="tera-rising"] .table-wrap tr.rank-3 td:nth-child(1) { color: #ffaa60 !important; }
/* Time Record */
body[data-theme="tera-rising"] #current-stack .table-wrap td:nth-child(2),
body[data-theme="tera-rising"] #archive-stack .table-wrap td:nth-child(2),
body[data-theme="tera-rising"] .table-wrap td:nth-child(2) {
display: block !important;
font-weight: 1000 !important;
font-size: 1.15rem !important;
color: #5bc7ff !important;
text-shadow: 0 0 14px rgba(91, 199, 255, 0.6) !important;
margin-bottom: 6px !important;
text-align: left !important;
}
/* Region Pill Badge */
body[data-theme="tera-rising"] #current-stack .table-wrap td:nth-child(3),
body[data-theme="tera-rising"] #archive-stack .table-wrap td:nth-child(3),
body[data-theme="tera-rising"] .table-wrap td:nth-child(3) {
position: absolute !important;
top: 14px !important;
right: 14px !important;
display: inline-block !important;
font-size: 0.72rem !important;
font-weight: 900 !important;
color: #b9c3d8 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
background: rgba(255, 255, 255, 0.06) !important;
padding: 2px 8px !important;
border-radius: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
margin-right: 0 !important;
}
body[data-theme="tera-rising"] .table-wrap td:nth-child(3)::before {
content: "" !important;
}
/* Character Name */
body[data-theme="tera-rising"] #current-stack .table-wrap td:nth-child(4),
body[data-theme="tera-rising"] #archive-stack .table-wrap td:nth-child(4),
body[data-theme="tera-rising"] .table-wrap td:nth-child(4) {
display: block !important;
font-size: 1.08rem !important;
font-weight: 1000 !important;
color: #ffffff !important;
letter-spacing: 0.02em !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 255, 255, 0.3) !important;
margin-bottom: 2px !important;
}
/* Account Handle Tag */
body[data-theme="tera-rising"] #current-stack .table-wrap td:nth-child(5),
body[data-theme="tera-rising"] #archive-stack .table-wrap td:nth-child(5),
body[data-theme="tera-rising"] .table-wrap td:nth-child(5) {
display: block !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
color: #d9b76a !important;
opacity: 0.88 !important;
}
/* Shell & Page Container Bottom Clearance on Mobile */
body[data-theme="tera-rising"] .shell {
padding-bottom: 150px !important;
padding-inline: 10px !important;
}
body[data-theme="tera-rising"] #archive-stack {
margin-bottom: 30px !important;
}
/* Past Leaderboard Season Navigation Buttons on Mobile (Screen Edges) */
body[data-theme="tera-rising"] #archive-carousel + .event-carousel-nav,
body[data-theme="tera-rising"] .event-carousel-nav {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
position: absolute !important;
top: 50% !important;
left: 0 !important;
right: 0 !important;
transform: translateY(-50%) !important;
z-index: 220 !important;
pointer-events: none !important;
margin: 0 !important;
padding: 0 2px !important;
}
body[data-theme="tera-rising"] .event-carousel-nav-btn {
pointer-events: auto !important;
width: 44px !important;
height: 44px !important;
border: 1.5px solid rgba(217, 183, 106, 0.85) !important;
border-radius: 50% !important;
background: radial-gradient(circle, rgba(217, 183, 106, 0.4), rgba(5, 9, 22, 0.95)) !important;
color: #fff2b7 !important;
font-size: 1.6rem !important;
font-weight: 1000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8), 0 0 20px rgba(217, 183, 106, 0.5) !important;
}
body[data-theme="tera-rising"] .event-carousel-nav-btn:active {
transform: scale(0.92) !important;
}
}
/* Desktop Specific Reset (Strictly for screens > 768px) */
@media (min-width: 769px) {
body[data-theme="tera-rising"] .shell {
padding-bottom: 160px !important;
}
body[data-theme="tera-rising"] #archive-stack {
margin-bottom: 20px !important;
}
}