.erderon-trilha,
.erderon-trilha * {
box-sizing: border-box;
}
html:has(.ebt-painel),
body:has(.ebt-painel) {
overflow-x: clip;
background: #050201;
}
.erderon-trilha {
--ebt-void: #050506;
--ebt-abyss: #0b0a0d;
--ebt-stone: #141215;
--ebt-stone-2: #211b1c;
--ebt-iron: #342b2b;
--ebt-iron-2: #52413a;
--ebt-gold: #c99a42;
--ebt-gold-2: #f7d179;
--ebt-gold-3: #8f6f2a;
--ebt-crimson: #8d1f1d;
--ebt-crimson-2: #d54a36;
--ebt-ember: #ff7a3c;
--ebt-green: #58d68a;
--ebt-text: #f1ead9;
--ebt-text-soft: #d6c8a9;
--ebt-muted: #a89982;
--ebt-line: rgba(247, 209, 121, 0.18);
--ebt-shadow-gold: 0 0 34px rgba(247, 209, 121, 0.24);
--ebt-shadow-red: 0 0 28px rgba(213, 74, 54, 0.22);
position: relative;
isolation: isolate;
overflow: clip;
width: 100%;
min-height: 100vh;
color: var(--ebt-text);
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(ellipse at 50% 0%, rgba(238, 184, 82, 0.16), transparent 34rem),
radial-gradient(ellipse at 16% 48%, rgba(118, 31, 24, 0.13), transparent 42rem),
radial-gradient(ellipse at 88% 58%, rgba(70, 57, 36, 0.1), transparent 38rem),
linear-gradient(180deg, #080707 0%, #0d0b0b 42%, #050505 100%);
}
.erderon-trilha::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.025;
pointer-events: none;
background-image:
linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse at 50% 48%, black, transparent 68%);
mask-image: radial-gradient(ellipse at 50% 48%, black, transparent 68%);
}
.erderon-trilha::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(circle at 22% 26%, rgba(247, 209, 121, 0.16) 0 1px, transparent 2px),
radial-gradient(circle at 78% 38%, rgba(255, 122, 60, 0.12) 0 1px, transparent 2px),
radial-gradient(circle at 55% 72%, rgba(247, 209, 121, 0.12) 0 1px, transparent 2px);
background-size: 240px 240px, 310px 310px, 190px 190px;
opacity: 0.45;
animation: ebt-world-drift 30s linear infinite;
}
@keyframes ebt-world-drift {
0% {
transform: translate3d(0, 0, 0) scale(1);
background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}
50% {
transform: translate3d(-1.2%, 1.4%, 0) scale(1.015);
background-position: 80px -130px, -90px 110px, 70px 80px, 0 0, 0 0;
}
100% {
transform: translate3d(0, 0, 0) scale(1);
background-position: 160px -260px, -180px 220px, 140px 160px, 0 0, 0 0;
}
}
.erderon-trilha button {
font: inherit;
text-decoration: none !important;
box-shadow: none;
}
.erderon-trilha button,
.erderon-trilha button:hover,
.erderon-trilha button:focus,
.erderon-trilha button:active,
.erderon-trilha input,
.erderon-trilha input:hover,
.erderon-trilha input:focus {
accent-color: var(--ebt-gold) !important;
outline-color: var(--ebt-gold) !important;
}
.erderon-trilha a,
.erderon-trilha a:hover,
.erderon-trilha a:focus {
color: var(--ebt-gold-2) !important;
}
.ebt-shell {
position: relative;
width: 100%;
}
.ebt-shell::before,
.ebt-shell::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.ebt-shell::before {
background:
radial-gradient(ellipse at 50% 7%, rgba(247, 209, 121, 0.12), transparent 30%),
radial-gradient(ellipse at 50% 58%, rgba(141, 31, 29, 0.08), transparent 42%);
animation: ebt-ambient-breathe 9s ease-in-out infinite;
}
.ebt-shell::after {
opacity: 0.12;
background-image:
linear-gradient(90deg, transparent 0 48%, rgba(247, 209, 121, 0.16) 49%, transparent 51%),
linear-gradient(0deg, transparent 0 49%, rgba(247, 209, 121, 0.08) 50%, transparent 51%);
background-size: 120px 120px;
-webkit-mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 70%);
mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 70%);
animation: ebt-map-slide 28s linear infinite;
}
@keyframes ebt-ambient-breathe {
0%,
100% {
opacity: 0.7;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.025);
}
}
@keyframes ebt-map-slide {
from {
background-position: 0 0;
}
to {
background-position: 84px 84px;
}
}
.ebt-tab-bar {
position: sticky;
top: 0;
z-index: 50;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid rgba(247, 209, 121, 0.16);
background:
linear-gradient(180deg, rgba(10, 8, 8, 0.96), rgba(4, 4, 5, 0.92)),
radial-gradient(ellipse at 50% 0%, rgba(247, 209, 121, 0.12), transparent 58%);
backdrop-filter: blur(16px);
}
.ebt-tab-button {
position: relative;
isolation: isolate;
min-height: 44px;
border: 1px solid rgba(247, 209, 121, 0.34) !important;
border-radius: 8px;
padding: 11px 22px;
color: var(--ebt-text-soft) !important;
background:
linear-gradient(180deg, rgba(70, 54, 32, 0.28), rgba(18, 14, 13, 0.95)),
linear-gradient(90deg, rgba(247, 209, 121, 0.05), transparent 26%, transparent 74%, rgba(247, 209, 121, 0.05)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 234, 173, 0.12),
inset 0 -1px 0 rgba(0, 0, 0, 0.7),
0 7px 20px rgba(0, 0, 0, 0.24);
cursor: pointer;
font-family: "Cinzel", Georgia, serif;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.ebt-tab-button::before,
.ebt-tab-button::after {
content: "";
position: absolute;
top: 50%;
z-index: -1;
width: 7px;
height: 7px;
border: 1px solid rgba(247, 209, 121, 0.4);
background: rgba(247, 209, 121, 0.12);
transform: translateY(-50%) rotate(45deg);
transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.ebt-tab-button::before {
left: 8px;
}
.ebt-tab-button::after {
right: 8px;
}
.ebt-tab-button:hover,
.ebt-tab-button:focus-visible {
border-color: rgba(247, 209, 121, 0.46) !important;
color: var(--ebt-gold-2) !important;
background:
linear-gradient(180deg, rgba(99, 72, 36, 0.36), rgba(26, 19, 16, 0.98)),
linear-gradient(90deg, rgba(247, 209, 121, 0.08), transparent 30%, transparent 70%, rgba(247, 209, 121, 0.08)) !important;
outline: none;
transform: translateY(-1px);
}
.ebt-tab-button:hover::before,
.ebt-tab-button:hover::after,
.ebt-tab-button:focus-visible::before,
.ebt-tab-button:focus-visible::after {
border-color: rgba(247, 209, 121, 0.78);
background: rgba(247, 209, 121, 0.32);
box-shadow: 0 0 10px rgba(247, 209, 121, 0.28);
}
.ebt-tab-button.is-active {
border-color: rgba(247, 209, 121, 0.64) !important;
color: #120c05 !important;
background:
linear-gradient(180deg, #ffe096, var(--ebt-gold) 58%, #9d6d22) !important;
box-shadow: var(--ebt-shadow-gold);
}
.ebt-tab-button.is-active::before,
.ebt-tab-button.is-active::after {
border-color: rgba(58, 34, 7, 0.5);
background: rgba(58, 34, 7, 0.22);
}
.ebt-tab-button-locked {
color: rgba(214, 200, 169, 0.58) !important;
border-color: rgba(168, 153, 130, 0.22) !important;
background:
linear-gradient(180deg, rgba(38, 34, 30, 0.38), rgba(10, 9, 9, 0.96)),
repeating-linear-gradient(135deg, rgba(247, 209, 121, 0.05) 0 5px, transparent 5px 10px) !important;
cursor: not-allowed;
}
.ebt-tab-button-locked:hover,
.ebt-tab-button-locked:focus-visible {
color: #ffcf8b !important;
border-color: rgba(255, 122, 60, 0.42) !important;
background:
linear-gradient(180deg, rgba(68, 36, 27, 0.48), rgba(10, 9, 9, 0.96)),
repeating-linear-gradient(135deg, rgba(255, 122, 60, 0.06) 0 5px, transparent 5px 10px) !important;
transform: translateY(-1px);
}
.ebt-tab-button-locked .ebt-tab-lock {
display: inline-block;
margin-right: 8px;
font-size: 13px;
filter: sepia(0.3) saturate(1.2);
transform: translateY(-1px);
}
.ebt-tab-button-locked::selection {
background: transparent;
}
.ebt-tab-button-locked[data-ebt-lock-label]::after {
content: attr(data-ebt-lock-label);
position: absolute;
top: calc(100% + 12px);
right: 50%;
z-index: 20;
width: max-content;
max-width: 260px;
height: auto;
border: 1px solid rgba(255, 122, 60, 0.42);
border-radius: 8px;
padding: 9px 12px;
color: #ffd3a3;
background: rgba(13, 9, 8, 0.96);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48), 0 0 20px rgba(141, 31, 29, 0.22);
font-family: "Inter", system-ui, sans-serif;
font-size: 13px;
font-weight: 800;
line-height: 1.25;
text-transform: none;
opacity: 0;
pointer-events: none;
transform: translate(50%, -6px);
transition: opacity 160ms ease, transform 160ms ease;
}
.ebt-tab-button-locked:hover[data-ebt-lock-label]::after,
.ebt-tab-button-locked:focus-visible[data-ebt-lock-label]::after {
opacity: 1;
transform: translate(50%, 0);
}
.ebt-tab-panel {
display: none;
}
.ebt-tab-panel.is-active {
display: block;
animation: ebt-fade-up 420ms ease both;
}
@keyframes ebt-fade-up {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ebt-summit {
position: relative;
display: grid;
justify-items: center;
gap: 12px;
padding: 54px 20px 70px;
text-align: center;
}
.ebt-summit::after {
content: "";
position: absolute;
top: 315px;
bottom: -92px;
left: 50%;
z-index: 0;
width: 66px;
transform: translateX(-50%);
border-radius: 999px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 22%, rgba(255, 255, 255, 0.12) 50%, transparent 78%),
linear-gradient(180deg, rgba(247, 209, 121, 0), rgba(201, 154, 66, 0.23) 20%, rgba(201, 154, 66, 0.12) 72%, rgba(201, 154, 66, 0));
filter: blur(0.2px);
opacity: 0.8;
pointer-events: none;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 74%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 74%, transparent 100%);
}
.ebt-summit-glow {
position: absolute;
top: 18px;
left: 50%;
width: 310px;
height: 310px;
transform: translateX(-50%);
border-radius: 999px;
background: radial-gradient(circle, rgba(247, 209, 121, 0.18), rgba(141, 31, 29, 0.08) 46%, transparent 70%);
filter: blur(8px);
pointer-events: none;
}
.ebt-seal {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 92px;
height: 92px;
border: 2px solid rgba(247, 209, 121, 0.58);
border-radius: 50%;
color: var(--ebt-gold-2);
background:
radial-gradient(circle at 35% 30%, rgba(247, 209, 121, 0.42), transparent 22%),
linear-gradient(145deg, #9d2520, #4d1111 58%, #210a09);
box-shadow: var(--ebt-shadow-gold), inset 0 0 24px rgba(0, 0, 0, 0.7);
font-family: "Cinzel", Georgia, serif;
font-size: 40px;
font-weight: 900;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.86);
}
.ebt-seal img {
display: block;
width: 76px;
height: 76px;
object-fit: contain;
border-radius: 50%;
}
.ebt-seal::after {
content: "";
position: absolute;
inset: -9px;
border: 1px solid rgba(247, 209, 121, 0.22);
border-radius: 50%;
animation: ebt-seal-pulse 3.6s ease-in-out infinite;
}
@keyframes ebt-seal-pulse {
0%,
100% {
opacity: 0.44;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.06);
}
}
.ebt-kicker {
position: relative;
z-index: 1;
margin: 0;
color: var(--ebt-gold);
font-family: "Cinzel", Georgia, serif;
font-size: 13px;
font-weight: 800;
line-height: 1.3;
text-transform: uppercase;
}
.ebt-summit h2,
.ebt-guide-header h2 {
position: relative;
z-index: 1;
margin: 0;
color: var(--ebt-gold-2);
font-family: "Cinzel", Georgia, serif;
font-size: 42px;
font-weight: 900;
line-height: 1.05;
text-transform: uppercase;
text-shadow: 0 0 28px rgba(247, 209, 121, 0.28);
}
.ebt-subtitle,
.ebt-guide-header p {
position: relative;
z-index: 1;
max-width: 680px;
margin: 0;
color: var(--ebt-text-soft);
font-size: 16px;
font-weight: 500;
line-height: 1.65;
}
.ebt-global-progress {
position: relative;
z-index: 2;
display: grid;
justify-items: center;
gap: 8px;
margin-top: 8px;
}
.ebt-ring-wrap {
position: relative;
width: 150px;
height: 150px;
}
.ebt-ring-wrap::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 74px;
height: 190px;
transform: translate(-50%, -3%);
border-radius: 999px;
background: linear-gradient(180deg, rgba(247, 209, 121, 0.28), rgba(247, 209, 121, 0.08) 48%, transparent 100%);
filter: blur(10px);
pointer-events: none;
}
.ebt-ring-wrap svg {
display: block;
transform: rotate(-90deg);
}
.ebt-ring-bg,
.ebt-ring-fill {
fill: none;
stroke-width: 8;
}
.ebt-ring-bg {
stroke: rgba(247, 209, 121, 0.14);
}
.ebt-ring-fill {
stroke-linecap: round;
stroke-dasharray: 408.4;
stroke-dashoffset: 408.4;
filter: drop-shadow(0 0 7px rgba(247, 209, 121, 0.72));
transition: stroke-dashoffset 900ms cubic-bezier(0.34, 1, 0.34, 1);
}
.ebt-ring-wrap strong {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--ebt-gold-2);
font-family: "Cinzel", Georgia, serif;
font-size: 30px;
font-weight: 900;
line-height: 1;
}
.ebt-global-progress > span {
color: var(--ebt-muted);
font-family: "Cinzel", Georgia, serif;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
}
.ebt-final-message {
max-width: 620px;
margin-top: 8px;
padding: 12px 18px;
border: 1px solid rgba(88, 214, 138, 0.3);
border-radius: 999px;
color: var(--ebt-green);
background: rgba(88, 214, 138, 0.08);
font-size: 15px;
font-weight: 800;
line-height: 1.35;
opacity: 0;
transform: translateY(6px);
transition: opacity 600ms ease, transform 600ms ease;
}
.ebt-final-message.is-visible {
opacity: 1;
transform: translateY(0);
}
.ebt-pipeline {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: min(100%, 980px);
margin: 0 auto;
padding: 6px 20px 96px;
}
.ebt-central-pipe {
position: absolute;
top: -122px;
bottom: 58px;
left: 50%;
z-index: 0;
width: 54px;
transform: translateX(-50%);
pointer-events: none;
}
.ebt-road {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 126px;
transform: translateX(-50%);
border-radius: 999px;
opacity: 0.5;
background:
radial-gradient(ellipse at center, rgba(247, 209, 121, 0.13), transparent 54%),
repeating-linear-gradient(
0deg,
rgba(247, 209, 121, 0.12) 0 10px,
transparent 10px 27px
);
mask-image: linear-gradient(90deg, transparent, black 25%, black 75%, transparent);
}
.ebt-road::before,
.ebt-road::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 2px;
border-radius: 999px;
background:
repeating-linear-gradient(
0deg,
rgba(247, 209, 121, 0.22) 0 18px,
transparent 18px 34px
);
animation: ebt-path-flow 2.8s linear infinite;
}
.ebt-road::before {
left: 22px;
}
.ebt-road::after {
right: 22px;
animation-delay: -1.4s;
}
.ebt-road-progress {
position: absolute;
right: 14px;
bottom: 0;
left: 14px;
height: 0%;
border-radius: 999px;
background:
linear-gradient(0deg, rgba(141, 31, 29, 0.1), rgba(247, 209, 121, 0.18)),
repeating-linear-gradient(0deg, rgba(247, 209, 121, 0.32) 0 9px, transparent 9px 24px);
box-shadow: 0 0 28px rgba(247, 209, 121, 0.24);
transition: height 1100ms cubic-bezier(0.34, 1.16, 0.5, 1);
animation: ebt-path-flow 2.4s linear infinite;
}
@keyframes ebt-path-flow {
from {
background-position-y: 0;
}
to {
background-position-y: -52px;
}
}
.ebt-adventurer {
position: absolute;
left: 50%;
bottom: 0%;
z-index: 3;
display: grid;
place-items: center;
width: 58px;
height: 64px;
transform: translate(-50%, 50%);
transition: bottom 1100ms cubic-bezier(0.34, 1.16, 0.5, 1);
}
.ebt-adventurer-aura {
position: absolute;
inset: 2px;
border-radius: 50%;
background: radial-gradient(circle, rgba(247, 209, 121, 0.42), rgba(247, 209, 121, 0.08) 52%, transparent 72%);
filter: blur(2px);
animation: ebt-adventurer-aura 2.4s ease-in-out infinite;
}
.ebt-warrior {
position: relative;
z-index: 1;
display: block;
width: 42px;
height: 54px;
filter: drop-shadow(0 0 13px rgba(247, 209, 121, 0.45)) drop-shadow(0 7px 10px rgba(0, 0, 0, 0.65));
animation: ebt-adventurer-step 1.7s ease-in-out infinite;
}
.ebt-warrior-cape {
position: absolute;
left: 7px;
top: 15px;
width: 28px;
height: 35px;
border-radius: 7px 7px 16px 16px;
background: linear-gradient(180deg, #8d1f1d, #2d0808);
transform: skewX(-7deg);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.55);
}
.ebt-warrior-head {
position: absolute;
left: 14px;
top: 2px;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 226, 140, 0.9);
border-radius: 50% 50% 44% 44%;
background: linear-gradient(145deg, #f7d179, #7a4d18);
box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.35);
}
.ebt-warrior-head::before {
content: "";
position: absolute;
left: -4px;
right: -4px;
top: 4px;
height: 5px;
border-radius: 999px;
background: #241816;
box-shadow: 0 -3px 0 #3a2924;
}
.ebt-warrior-body {
position: absolute;
left: 12px;
top: 17px;
width: 20px;
height: 24px;
border: 1px solid rgba(247, 209, 121, 0.72);
border-radius: 6px 6px 4px 4px;
background:
linear-gradient(135deg, transparent 0 42%, rgba(255, 238, 164, 0.56) 43% 48%, transparent 49%),
linear-gradient(145deg, #6e747c, #1c2026 55%, #0a0b0d);
box-shadow: inset 0 0 9px rgba(255, 255, 255, 0.08);
}
.ebt-warrior-legs {
position: absolute;
left: 14px;
top: 39px;
width: 16px;
height: 13px;
}
.ebt-warrior-legs::before,
.ebt-warrior-legs::after {
content: "";
position: absolute;
top: 0;
width: 6px;
height: 13px;
border-radius: 0 0 4px 4px;
background: linear-gradient(180deg, #30343a, #090909);
}
.ebt-warrior-legs::before {
left: 1px;
transform: rotate(7deg);
}
.ebt-warrior-legs::after {
right: 1px;
transform: rotate(-7deg);
}
.ebt-warrior-sword {
position: absolute;
right: 0;
top: 6px;
width: 4px;
height: 41px;
border-radius: 999px;
background: linear-gradient(180deg, #fff4bd, #b9c2c7 42%, #5a6268);
transform: rotate(22deg);
transform-origin: bottom center;
box-shadow: 0 0 9px rgba(247, 209, 121, 0.65);
}
.ebt-warrior-sword::before {
content: "";
position: absolute;
left: 50%;
top: -7px;
width: 0;
height: 0;
transform: translateX(-50%);
border-right: 4px solid transparent;
border-bottom: 9px solid #fff4bd;
border-left: 4px solid transparent;
}
.ebt-warrior-sword::after {
content: "";
position: absolute;
left: 50%;
bottom: 8px;
width: 15px;
height: 4px;
transform: translateX(-50%) rotate(90deg);
border-radius: 999px;
background: #f7d179;
}
.ebt-warrior-shield {
position: absolute;
left: 0;
top: 21px;
width: 17px;
height: 22px;
border: 1px solid rgba(247, 209, 121, 0.8);
border-radius: 9px 9px 11px 11px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.18), transparent 52%),
linear-gradient(145deg, #7f1b19, #240707);
box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.55), 0 0 9px rgba(141, 31, 29, 0.45);
}
.ebt-warrior-shield::after {
content: "";
position: absolute;
left: 50%;
top: 4px;
bottom: 4px;
width: 2px;
transform: translateX(-50%);
background: rgba(247, 209, 121, 0.75);
}
@keyframes ebt-adventurer-step {
0%,
100% {
transform: translateY(0) rotate(-4deg);
}
50% {
transform: translateY(-4px) rotate(5deg);
}
}
@keyframes ebt-adventurer-aura {
0%,
100% {
opacity: 0.45;
transform: scale(0.95);
}
50% {
opacity: 1;
transform: scale(1.14);
}
}
.ebt-pipe-body {
position: absolute;
inset: 0;
overflow: hidden;
border: 1px solid rgba(247, 209, 121, 0.16);
border-radius: 999px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 18%, rgba(255, 255, 255, 0.08) 48%, transparent 82%),
linear-gradient(90deg, #151013, #2b2020 54%, #0b090a);
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
-webkit-mask-image: linear-gradient(180deg, transparent 0, black 110px, black calc(100% - 32px), transparent 100%);
mask-image: linear-gradient(180deg, transparent 0, black 110px, black calc(100% - 32px), transparent 100%);
}
.ebt-pipe-fluid {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 0%;
overflow: hidden;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 20%, rgba(255, 255, 255, 0.24) 52%, transparent 84%),
linear-gradient(0deg, #9b211c 0%, #d54a36 30%, #c99a42 66%, #ffe08c 100%);
box-shadow: 0 0 36px rgba(247, 209, 121, 0.6), inset 0 0 18px rgba(255, 255, 255, 0.16);
transition: height 1100ms cubic-bezier(0.34, 1.16, 0.5, 1);
}
.ebt-pipe-fluid::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.34) 0 2px, transparent 3px),
radial-gradient(circle at 42% 62%, rgba(255, 255, 255, 0.2) 0 1px, transparent 2px),
linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 28%);
background-size: 36px 60px, 42px 72px, 100% 100%;
animation: ebt-gold-current 2.1s linear infinite;
}
@keyframes ebt-gold-current {
from {
background-position: 0 80px, 0 120px, 0 0;
}
to {
background-position: 0 -80px, 0 -120px, 0 0;
}
}
.ebt-pipe-fluid span {
position: absolute;
top: -10px;
left: 50%;
width: 84px;
height: 20px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(ellipse, rgba(255, 255, 255, 0.64), rgba(247, 209, 121, 0.28) 44%, transparent 72%);
filter: blur(1px);
animation: ebt-liquid-surface 2.6s ease-in-out infinite;
}
@keyframes ebt-liquid-surface {
0%,
100% {
transform: translateX(-50%) scaleX(0.88);
opacity: 0.72;
}
50% {
transform: translateX(-50%) scaleX(1.2);
opacity: 1;
}
}
.ebt-pipe-coins {
position: absolute;
inset: 0;
overflow: hidden;
}
.ebt-pipe-coin {
position: absolute;
bottom: -28px;
left: 50%;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
color: #120c05;
background: radial-gradient(circle at 35% 30%, #fff0b4, #f3c65d 48%, #9a6b1c);
box-shadow: 0 0 12px rgba(247, 209, 121, 0.78);
border: 1px solid rgba(255, 236, 168, 0.72);
font-size: 0;
font-weight: 900;
line-height: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
opacity: 0;
}
.ebt-pipe-coin::before {
content: "$";
position: relative;
z-index: 1;
color: #2a1604;
font-family: Georgia, "Times New Roman", serif;
font-size: 19px;
font-weight: 900;
line-height: 1;
transform: translateY(-1px);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.36),
0 -1px 0 rgba(120, 72, 10, 0.5);
}
.ebt-pipe-coin::after {
content: "";
position: absolute;
left: 50%;
top: 4px;
bottom: 4px;
width: 2px;
border-radius: 999px;
background: #2a1604;
box-shadow:
-4px 0 0 -0.5px rgba(42, 22, 4, 0.76),
4px 0 0 -0.5px rgba(42, 22, 4, 0.76);
transform: translateX(-50%);
opacity: 0.85;
}
.ebt-pipe-coin.is-active {
animation: ebt-coin-rise var(--coin-duration, 4s) linear infinite;
animation-delay: var(--coin-delay, 0s);
}
@keyframes ebt-coin-rise {
0% {
bottom: -28px;
opacity: 0;
transform: translateX(-50%) translateX(0) rotate(0deg) scale(0.7);
}
12% {
opacity: 1;
}
45% {
transform: translateX(-50%) translateX(var(--coin-sway, 7px)) rotate(180deg) scale(1);
}
82% {
opacity: 1;
}
100% {
bottom: 100%;
opacity: 0;
transform: translateX(-50%) translateX(calc(var(--coin-sway, 7px) * -1)) rotate(360deg) scale(0.78);
}
}
.ebt-station {
position: relative;
z-index: 2;
display: grid;
justify-items: center;
width: 100%;
max-width: 820px;
margin: 18px 0;
}
.ebt-connector {
display: block;
width: 4px;
height: 36px;
border-radius: 999px;
background: rgba(247, 209, 121, 0.16);
transition: background 300ms ease, box-shadow 300ms ease;
}
.ebt-connector.is-lit {
background: linear-gradient(180deg, var(--ebt-gold-2), var(--ebt-gold));
box-shadow: 0 0 16px rgba(247, 209, 121, 0.7);
}
.ebt-station-card {
position: relative;
display: grid;
grid-template-columns: 62px minmax(0, 1fr) 28px;
align-items: center;
gap: 18px;
width: 100%;
border: 1px solid rgba(247, 209, 121, 0.18) !important;
border-radius: 10px;
padding: 20px 24px;
color: inherit !important;
background:
linear-gradient(90deg, rgba(247, 209, 121, 0.05), transparent 42%),
linear-gradient(145deg, rgba(33, 27, 28, 0.97), rgba(13, 10, 12, 0.98)) !important;
box-shadow: 0 14px 46px rgba(0, 0, 0, 0.35);
cursor: pointer;
text-align: left;
transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
}
.ebt-station-card::before,
.ebt-station-card::after {
content: "";
position: absolute;
pointer-events: none;
}
.ebt-station-card::before {
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, rgba(247, 209, 121, 0.22), transparent 20%, transparent 80%, rgba(247, 209, 121, 0.16));
opacity: 0;
transition: opacity 220ms ease;
}
.ebt-station-card::after {
top: 0;
bottom: 0;
left: 0;
width: 5px;
border-radius: 10px 0 0 10px;
background: rgba(168, 153, 130, 0.34);
transition: background 220ms ease, box-shadow 220ms ease;
}
.ebt-station-card:hover,
.ebt-station-card:focus-visible {
border-color: rgba(247, 209, 121, 0.48) !important;
background:
linear-gradient(90deg, rgba(247, 209, 121, 0.08), transparent 42%),
linear-gradient(145deg, rgba(39, 31, 30, 0.98), rgba(13, 10, 12, 0.98)) !important;
outline: none;
transform: translateY(-2px);
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.5), var(--ebt-shadow-gold);
}
.ebt-station-card:hover::before,
.ebt-station-card:focus-visible::before {
opacity: 1;
}
.ebt-station-card.is-completed {
border-color: rgba(88, 214, 138, 0.36);
}
.ebt-station-card.is-completed::after {
background: var(--ebt-green);
box-shadow: 0 0 16px rgba(88, 214, 138, 0.6);
}
.ebt-station-card.is-in-progress {
border-color: rgba(255, 122, 60, 0.46);
}
.ebt-station-card.is-in-progress::after {
background: var(--ebt-ember);
box-shadow: 0 0 18px rgba(255, 122, 60, 0.45);
}
.ebt-station-card.is-blocked {
border-color: rgba(213, 74, 54, 0.36);
opacity: 0.86;
}
.ebt-station-card.is-blocked::after {
background: var(--ebt-crimson-2);
}
.ebt-card-icon {
display: grid;
place-items: center;
width: 58px;
height: 58px;
border: 1px solid rgba(247, 209, 121, 0.2);
border-radius: 10px;
background: rgba(5, 5, 6, 0.68);
font-size: 26px;
line-height: 1;
}
.ebt-card-meta {
display: grid;
gap: 7px;
min-width: 0;
}
.ebt-card-title {
color: var(--ebt-text);
font-family: "Cinzel", Georgia, serif;
font-size: 19px;
font-weight: 800;
line-height: 1.25;
}
.ebt-card-desc {
color: var(--ebt-text-soft);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
}
.ebt-card-progress {
display: grid;
grid-template-columns: minmax(0, 1fr) 58px;
align-items: center;
gap: 12px;
margin-top: 2px;
}
.ebt-card-progress-track {
overflow: hidden;
height: 8px;
border: 1px solid rgba(247, 209, 121, 0.16);
border-radius: 999px;
background: rgba(5, 5, 6, 0.72);
}
.ebt-card-progress-fill {
display: block;
width: 0%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--ebt-gold-3), var(--ebt-gold), var(--ebt-gold-2));
box-shadow: 0 0 12px rgba(247, 209, 121, 0.6);
transition: width 520ms ease;
}
.ebt-card-progress-text {
color: var(--ebt-muted);
font-family: "Cinzel", Georgia, serif;
font-size: 14px;
font-weight: 800;
line-height: 1;
text-align: right;
}
.ebt-card-chevron {
display: grid;
place-items: center;
width: 28px;
height: 28px;
color: var(--ebt-gold);
font-size: 24px;
line-height: 1;
transition: transform 220ms ease;
}
.ebt-station-card.is-open .ebt-card-chevron {
transform: rotate(180deg);
}
.ebt-tasks {
display: none;
width: 100%;
border: 1px solid rgba(247, 209, 121, 0.14);
border-top: 0;
border-radius: 0 0 10px 10px;
padding: 12px 24px 20px;
background: linear-gradient(180deg, rgba(20, 18, 21, 0.98), rgba(8, 7, 8, 0.98));
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}
.ebt-tasks.is-open {
display: block;
animation: ebt-open 260ms ease both;
}
@keyframes ebt-open {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ebt-task-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: start;
gap: 14px;
padding: 15px 0;
border-bottom: 1px solid rgba(247, 209, 121, 0.1);
cursor: pointer;
}
.ebt-task-row:last-child {
border-bottom: 0;
}
.ebt-task-row:hover .ebt-task-copy strong {
color: var(--ebt-gold-2);
}
.ebt-check {
appearance: none;
width: 23px;
height: 23px;
margin: 2px 0 0;
border: 2px solid rgba(247, 209, 121, 0.3);
border-radius: 6px;
background: #080707;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.ebt-check:hover,
.ebt-check:focus-visible {
border-color: rgba(247, 209, 121, 0.7);
outline: none;
}
.ebt-check:checked {
border-color: var(--ebt-gold-2);
background: linear-gradient(135deg, var(--ebt-gold), var(--ebt-gold-2));
box-shadow: 0 0 15px rgba(247, 209, 121, 0.48);
}
.ebt-check:checked::after {
content: "+";
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: #140c04;
font-size: 18px;
font-weight: 900;
line-height: 1;
}
.ebt-task-copy {
display: grid;
gap: 5px;
}
.ebt-task-copy strong {
color: var(--ebt-text);
font-size: 15.5px;
font-weight: 800;
line-height: 1.42;
transition: color 160ms ease;
}
.ebt-task-copy span {
color: var(--ebt-text-soft);
font-size: 15px;
font-weight: 500;
line-height: 1.55;
}
.ebt-check:checked + .ebt-task-copy strong,
.ebt-check:checked + .ebt-task-copy span {
color: rgba(214, 200, 169, 0.7);
text-decoration: line-through;
text-decoration-color: rgba(247, 209, 121, 0.62);
}
.ebt-rune {
align-self: start;
min-width: 72px;
border: 1px solid currentColor;
border-radius: 999px;
padding: 5px 10px;
font-family: "Cinzel", Georgia, serif;
font-size: 12px;
font-weight: 900;
line-height: 1.2;
text-align: center;
}
.ebt-rune-critical {
color: #ff6b55;
background: rgba(213, 74, 54, 0.1);
}
.ebt-rune-major {
color: #ffb05c;
background: rgba(255, 122, 60, 0.1);
}
.ebt-rune-minor {
color: var(--ebt-gold-2);
background: rgba(247, 209, 121, 0.1);
}
.ebt-bridge {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
gap: 12px;
width: min(100%, 700px);
margin: 12px 0 18px;
padding: 14px 18px;
border: 1px dashed rgba(213, 74, 54, 0.52);
border-radius: 10px;
color: #ff8b76;
background: rgba(141, 31, 29, 0.13);
box-shadow: var(--ebt-shadow-red);
font-size: 15px;
font-weight: 600;
line-height: 1.5;
animation: ebt-bridge-pulse 3.8s ease-in-out infinite;
}
.ebt-bridge.is-solved {
border-style: solid;
border-color: rgba(88, 214, 138, 0.5);
color: #9ef0bb;
background: rgba(88, 214, 138, 0.1);
box-shadow: 0 0 22px rgba(88, 214, 138, 0.16);
animation: none;
}
.ebt-bridge-icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
color: #160807;
background: #ff8b76;
font-family: "Cinzel", Georgia, serif;
font-weight: 900;
}
.ebt-bridge.is-solved .ebt-bridge-icon {
background: var(--ebt-green);
}
@keyframes ebt-bridge-pulse {
0%,
100% {
transform: translateX(0);
}
92% {
transform: translateX(0);
}
95% {
transform: translateX(-3px);
}
98% {
transform: translateX(3px);
}
}
.ebt-coin-burst {
position: fixed;
z-index: 999999;
left: 0;
top: 0;
width: 0;
height: 0;
pointer-events: none;
}
.ebt-coin-particle {
position: absolute;
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
color: #110b04;
background: radial-gradient(circle at 35% 28%, #fff0b2, #efc257 52%, #936716);
box-shadow: 0 0 16px rgba(247, 209, 121, 0.78);
font-family: "Cinzel", Georgia, serif;
font-size: 11px;
font-weight: 900;
opacity: 0;
transition: transform 820ms cubic-bezier(0.22, 0.84, 0.28, 1), opacity 820ms ease;
}
.ebt-guide {
width: min(100%, 880px);
margin: 0 auto;
padding: 44px 20px 82px;
}
.ebt-guide-header {
display: grid;
justify-items: center;
gap: 10px;
margin-bottom: 28px;
text-align: center;
}
.ebt-guide-phase {
overflow: hidden;
margin: 0 0 16px;
border: 1px solid rgba(247, 209, 121, 0.18);
border-radius: 10px;
background: rgba(20, 18, 21, 0.82);
box-shadow: 0 14px 42px rgba(0, 0, 0, 0.3);
}
.ebt-guide-toggle {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 28px;
align-items: center;
gap: 12px;
width: 100%;
border: 0 !important;
padding: 17px 20px;
color: var(--ebt-text) !important;
background: linear-gradient(90deg, rgba(247, 209, 121, 0.08), rgba(20, 18, 21, 0.98)) !important;
cursor: pointer;
text-align: left;
}
.ebt-guide-toggle:hover,
.ebt-guide-toggle:focus-visible {
outline: none;
color: var(--ebt-gold-2) !important;
background: linear-gradient(90deg, rgba(247, 209, 121, 0.14), rgba(20, 18, 21, 0.98)) !important;
}
.ebt-guide-toggle > span:first-child {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid rgba(247, 209, 121, 0.26);
border-radius: 50%;
color: var(--ebt-gold-2);
background: rgba(5, 5, 6, 0.6);
font-family: "Cinzel", Georgia, serif;
font-weight: 900;
}
.ebt-guide-toggle strong {
font-family: "Cinzel", Georgia, serif;
font-size: 17px;
font-weight: 800;
line-height: 1.35;
}
.ebt-guide-toggle i {
color: var(--ebt-gold);
font-size: 23px;
font-style: normal;
line-height: 1;
transition: transform 180ms ease;
}
.ebt-guide-toggle.is-open i {
transform: rotate(180deg);
}
.ebt-guide-steps {
display: none;
padding: 8px 22px 20px;
background: rgba(7, 6, 7, 0.82);
}
.ebt-guide-steps.is-open {
display: block;
animation: ebt-open 260ms ease both;
}
.ebt-guide-step {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid rgba(247, 209, 121, 0.1);
}
.ebt-guide-step:last-child {
border-bottom: 0;
}
.ebt-guide-step > span {
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-top: 2px;
border: 1px solid rgba(247, 209, 121, 0.2);
border-radius: 50%;
color: var(--ebt-gold-2);
background: rgba(33, 27, 28, 0.9);
font-family: "Cinzel", Georgia, serif;
font-size: 14px;
font-weight: 900;
}
.ebt-guide-step h3 {
margin: 0 0 7px;
color: var(--ebt-text);
font-size: 16px;
font-weight: 800;
line-height: 1.4;
}
.ebt-guide-step p {
margin: 0;
color: var(--ebt-text-soft);
font-size: 15.5px;
font-weight: 500;
line-height: 1.7;
}
.ebt-guide-step code {
display: inline-block;
border: 1px solid rgba(247, 209, 121, 0.18);
border-radius: 6px;
padding: 1px 6px;
color: var(--ebt-gold-2);
background: rgba(247, 209, 121, 0.08);
font-family: Consolas, "Courier New", monospace;
font-size: 14px;
line-height: 1.45;
}
.ebt-path {
display: inline-block;
border: 1px solid rgba(247, 209, 121, 0.24);
border-radius: 7px;
padding: 3px 8px;
color: var(--ebt-gold-2);
background: rgba(247, 209, 121, 0.1);
font-weight: 800;
}
.ebt-ops {
width: min(100%, 1120px);
margin: 0 auto;
padding: 46px 20px 88px;
}
.ebt-ops-hero {
position: relative;
display: grid;
gap: 14px;
margin: 0 auto 30px;
text-align: center;
}
.ebt-ops-hero h2 {
margin: 0;
color: var(--ebt-gold-2);
font-family: "Cinzel", Georgia, serif;
font-size: clamp(38px, 6vw, 76px);
font-weight: 900;
line-height: 0.96;
text-transform: uppercase;
text-shadow: 0 0 28px rgba(247, 209, 121, 0.28);
}
.ebt-ops-hero p {
max-width: 780px;
margin: 0 auto;
color: var(--ebt-text-soft);
font-size: 17px;
line-height: 1.65;
}
.ebt-ops-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 8px;
}
.ebt-ops-actions a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border: 1px solid rgba(247, 209, 121, 0.36);
border-radius: 8px;
padding: 10px 15px;
background: rgba(247, 209, 121, 0.1);
color: var(--ebt-gold-2) !important;
font-size: 13px;
font-weight: 800;
text-decoration: none !important;
}
.ebt-ops-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 18px;
}
.ebt-ops-metrics {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ebt-ops-card,
.ebt-email-card,
.ebt-email-detail,
.ebt-doc-item {
border: 1px solid rgba(247, 209, 121, 0.18);
border-radius: 10px;
background:
linear-gradient(180deg, rgba(33, 27, 28, 0.84), rgba(7, 6, 7, 0.84)),
rgba(20, 18, 21, 0.82);
box-shadow: 0 14px 42px rgba(0, 0, 0, 0.3);
}
.ebt-ops-card {
padding: 20px;
}
.ebt-ops-card h3,
.ebt-email-card h3,
.ebt-doc-item h3 {
margin: 0 0 10px;
color: var(--ebt-text);
font-size: 19px;
font-weight: 850;
line-height: 1.25;
}
.ebt-ops-card p,
.ebt-email-card p,
.ebt-doc-item p {
margin: 0;
color: var(--ebt-text-soft);
font-size: 15px;
line-height: 1.65;
}
.ebt-metric span,
.ebt-doc-item > span {
display: block;
margin-bottom: 10px;
color: var(--ebt-muted);
font-family: "Cinzel", Georgia, serif;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.ebt-metric strong {
display: block;
margin-bottom: 8px;
color: var(--ebt-gold-2);
font-family: "Cinzel", Georgia, serif;
font-size: clamp(24px, 3vw, 34px);
font-weight: 900;
line-height: 1;
}
.ebt-ops-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.ebt-ops-list li {
color: var(--ebt-text-soft);
font-size: 15px;
line-height: 1.6;
}
.ebt-ops-list strong {
color: var(--ebt-gold-2);
}
.ebt-ops code,
.ebt-email-detail code,
.ebt-doc-item code {
display: inline-block;
border: 1px solid rgba(247, 209, 121, 0.18);
border-radius: 6px;
padding: 1px 6px;
color: var(--ebt-gold-2);
background: rgba(247, 209, 121, 0.08);
font-family: Consolas, "Courier New", monospace;
font-size: 14px;
line-height: 1.45;
}
.ebt-update-line {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 16px;
padding: 14px 0;
border-top: 1px solid rgba(247, 209, 121, 0.1);
}
.ebt-update-line:first-of-type {
border-top: 0;
}
.ebt-update-line span {
color: var(--ebt-gold-2);
font-weight: 850;
}
.ebt-update-line p {
margin: 0;
}
.ebt-email-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
margin: 0 0 18px;
}
.ebt-email-card {
position: relative;
min-height: 218px;
padding: 18px;
transition: transform 180ms ease, border-color 180ms ease;
}
.ebt-email-card:hover {
transform: translateY(-3px);
border-color: rgba(247, 209, 121, 0.42);
}
.ebt-email-day {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: 16px;
border: 1px solid rgba(247, 209, 121, 0.36);
border-radius: 50%;
color: var(--ebt-gold-2);
background: rgba(5, 5, 6, 0.72);
font-family: "Cinzel", Georgia, serif;
font-weight: 900;
}
.ebt-email-card strong {
display: inline-flex;
align-items: center;
min-height: 26px;
margin-top: 14px;
border: 1px solid rgba(88, 214, 138, 0.32);
border-radius: 999px;
padding: 4px 9px;
color: var(--ebt-green);
font-size: 12px;
}
.ebt-email-details {
display: grid;
gap: 12px;
}
.ebt-email-detail {
overflow: hidden;
}
.ebt-email-detail summary {
cursor: pointer;
display: grid;
grid-template-columns: 72px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 16px 18px;
color: var(--ebt-text);
list-style: none;
}
.ebt-email-detail summary::-webkit-details-marker {
display: none;
}
.ebt-email-detail summary span,
.ebt-email-detail summary em {
color: var(--ebt-gold-2);
font-style: normal;
font-weight: 850;
}
.ebt-email-detail > div {
padding: 0 18px 18px 102px;
color: var(--ebt-text-soft);
}
.ebt-email-detail p {
margin: 0 0 11px;
line-height: 1.65;
}
.ebt-doc-list {
display: grid;
gap: 14px;
}
.ebt-doc-item {
display: grid;
grid-template-columns: 130px minmax(0, 1fr);
gap: 18px;
padding: 18px;
}
.ebt-doc-item code {
margin-top: 10px;
word-break: break-word;
}
.ebt-gap-dot {
border-radius: 50%;
}
.ebt-gap-critical {
background: var(--ebt-crimson-2) !important;
box-shadow: 0 0 14px rgba(213, 74, 54, 0.45);
}
.ebt-gap-major {
background: var(--ebt-ember) !important;
box-shadow: 0 0 14px rgba(255, 122, 60, 0.35);
}
.ebt-gap-minor {
background: var(--ebt-green) !important;
box-shadow: 0 0 14px rgba(88, 214, 138, 0.35);
}
.ebt-modal {
position: fixed;
inset: 0;
z-index: 999998;
display: none;
align-items: center;
justify-content: center;
padding: 22px;
background: rgba(5, 5, 6, 0.82);
backdrop-filter: blur(12px);
}
.ebt-modal.is-open {
display: flex;
}
.ebt-modal-card {
position: relative;
width: min(100%, 430px);
overflow: hidden;
border: 1px solid rgba(247, 209, 121, 0.7);
border-radius: 12px;
padding: 34px 28px 28px;
text-align: center;
background: linear-gradient(145deg, #211b1c, #0d0b0d);
box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6), var(--ebt-shadow-gold);
animation: ebt-modal-pop 340ms cubic-bezier(0.34, 1.28, 0.64, 1) both;
}
.ebt-modal-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, transparent, var(--ebt-gold-2), transparent);
}
@keyframes ebt-modal-pop {
from {
opacity: 0;
transform: translateY(18px) scale(0.94);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ebt-modal-sigil {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 50%;
color: #110b04;
background: linear-gradient(135deg, var(--ebt-gold), var(--ebt-gold-2));
box-shadow: var(--ebt-shadow-gold);
font-size: 34px;
font-weight: 900;
}
.ebt-modal-card h3 {
margin: 0 0 9px;
color: var(--ebt-gold-2);
font-family: "Cinzel", Georgia, serif;
font-size: 24px;
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
}
.ebt-modal-card p {
margin: 0 0 22px;
color: var(--ebt-text-soft);
font-size: 16px;
font-weight: 500;
line-height: 1.65;
}
.ebt-modal-button {
min-height: 46px;
border: 0 !important;
border-radius: 999px;
padding: 12px 22px;
color: #120c05 !important;
background: linear-gradient(135deg, var(--ebt-gold), var(--ebt-gold-2)) !important;
box-shadow: var(--ebt-shadow-gold);
cursor: pointer;
font-family: "Cinzel", Georgia, serif;
font-size: 15px;
font-weight: 900;
text-transform: uppercase;
}
.ebt-modal-button:hover,
.ebt-modal-button:focus-visible {
color: #120c05 !important;
background: linear-gradient(135deg, var(--ebt-gold-2), #ffe6a0) !important;
outline: none;
}
.ebt-painel {
--ebt-panel-bg: #100e0d;
--ebt-gold: #c99a42;
--ebt-gold-2: #f7d179;
--ebt-text: #f1ead9;
position: relative;
display: grid;
align-items: center;
isolation: isolate;
overflow: visible;
width: 100%;
max-width: 100%;
min-height: 100vh;
margin: 0;
border-radius: 0;
padding: clamp(52px, 7vw, 96px) 24px;
color: var(--ebt-text);
background: transparent;
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ebt-painel::before,
.ebt-painel::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 50dvw);
width: 100dvw;
z-index: -1;
pointer-events: none;
}
.ebt-painel::before {
top: 0;
bottom: auto;
height: 100%;
background:
radial-gradient(ellipse at 48% 0%, rgba(247, 209, 121, 0.2), transparent 34rem),
radial-gradient(ellipse at 16% 52%, rgba(141, 31, 29, 0.18), transparent 34rem),
linear-gradient(180deg, rgba(16, 14, 13, 0) 0%, rgba(16, 12, 10, 0.12) 24%, rgba(6, 4, 4, 0.62) 92%),
var(--ebt-painel-bear) center bottom / min(1360px, 146dvw) auto no-repeat,
linear-gradient(180deg, #17120f 0%, #0d0a09 54%, #050201 100%);
opacity: 0.5;
mix-blend-mode: screen;
filter: saturate(1.34) contrast(1.12);
}
.ebt-painel::after {
background:
linear-gradient(180deg, rgba(5, 4, 4, 0.02), rgba(5, 2, 1, 0.44)),
radial-gradient(ellipse at 50% 100%, rgba(255, 85, 35, 0.25), transparent 46rem);
}
.ebt-painel-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
justify-content: center;
align-items: center;
gap: 24px;
width: min(100%, 1224px);
margin: 0 auto;
}
.ebt-painel-card {
position: relative;
isolation: isolate;
display: block;
overflow: hidden;
min-height: 100%;
border: 1px solid rgba(247, 209, 121, 0.24);
border-radius: 8px;
color: inherit !important;
background:
linear-gradient(180deg, rgba(33, 27, 28, 0.86), rgba(12, 10, 9, 0.96)),
#1d1a16;
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
text-decoration: none !important;
transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
@property --ebt-portal-border-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.ebt-painel-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--ebt-portal-border-angle), rgba(247, 209, 121, 0.12), rgba(255, 122, 60, 0.92), rgba(247, 209, 121, 0.9), rgba(141, 31, 29, 0.86), rgba(247, 209, 121, 0.12));
pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: 0.72;
animation: ebt-portal-border-spin 6.5s linear infinite;
}
.ebt-painel-card::after {
content: "";
position: absolute;
inset: 1px;
z-index: 2;
border-radius: inherit;
box-shadow: inset 0 0 22px rgba(247, 209, 121, 0.08), inset 0 0 34px rgba(141, 31, 29, 0.12);
pointer-events: none;
}
.ebt-painel-card:hover,
.ebt-painel-card:focus-visible {
border-color: rgba(247, 209, 121, 0.44);
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.44), 0 0 24px rgba(247, 209, 121, 0.14);
outline: none;
transform: translateY(-3px);
}
.ebt-painel-card:hover::before,
.ebt-painel-card:focus-visible::before {
opacity: 1;
animation-duration: 3.6s;
}
@keyframes ebt-portal-border-spin {
to {
--ebt-portal-border-angle: 360deg;
}
}
.ebt-painel-card-image,
.ebt-painel-placeholder {
display: block;
width: 100%;
aspect-ratio: 3 / 2;
}
.ebt-painel-card-image {
object-fit: cover;
}
.ebt-painel-placeholder {
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 30% 24%, rgba(247, 209, 121, 0.14), transparent 30%),
linear-gradient(135deg, #3a1f22, #15120f);
}
.ebt-painel-placeholder span {
color: rgba(243, 231, 210, 0.64);
font-family: "Cinzel", Georgia, serif;
font-size: 13px;
font-weight: 800;
letter-spacing: 0;
}
.ebt-painel-card-title {
min-height: 60px;
padding: 14px 16px 16px;
}
.ebt-painel-card-title strong {
display: block;
color: var(--ebt-text);
font-family: "Cinzel", Georgia, serif;
font-size: 16px;
font-weight: 800;
line-height: 1.35;
overflow-wrap: anywhere;
}
.ebt-painel-stage {
position: relative;
z-index: 1;
display: grid;
grid-template-rows: auto auto auto;
align-content: center;
align-items: center;
justify-items: center;
overflow: hidden;
width: min(100%, 1480px);
min-height: min(720px, calc(100vh - 48px));
margin: 0 auto;
border: 1px solid rgba(247, 209, 121, 0.58);
border-radius: 22px;
padding: clamp(34px, 5vw, 76px);
background:
linear-gradient(rgba(247, 209, 121, 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(247, 209, 121, 0.04) 1px, transparent 1px),
radial-gradient(ellipse at 50% 0%, rgba(247, 209, 121, 0.18), transparent 42%),
radial-gradient(ellipse at 50% 100%, rgba(196, 55, 34, 0.26), transparent 46%),
linear-gradient(180deg, rgba(23, 18, 15, 0.76), rgba(4, 2, 2, 0.86));
background-size: 92px 92px, 92px 92px, auto, auto, auto;
box-shadow:
inset 0 0 0 1px rgba(255, 238, 189, 0.12),
inset 0 0 44px rgba(247, 209, 121, 0.12),
inset 0 -44px 90px rgba(255, 92, 42, 0.16),
0 0 34px rgba(247, 209, 121, 0.2),
0 28px 90px rgba(0, 0, 0, 0.58);
}
.ebt-painel-frame {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.ebt-painel-frame::before,
.ebt-painel-frame::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
}
.ebt-painel-frame::before {
background:
linear-gradient(115deg, transparent 0 38%, rgba(247, 209, 121, 0.12) 39%, transparent 40%),
linear-gradient(245deg, transparent 0 40%, rgba(247, 209, 121, 0.09) 41%, transparent 42%),
radial-gradient(ellipse at 50% 50%, transparent 0 36%, rgba(247, 209, 121, 0.08) 60%, transparent 72%);
opacity: 0.72;
}
.ebt-painel-frame::after {
box-shadow:
inset 0 0 18px rgba(255, 226, 143, 0.52),
inset 0 0 34px rgba(183, 89, 38, 0.36),
inset 0 0 88px rgba(247, 209, 121, 0.12);
}
.ebt-painel-side {
position: absolute;
z-index: 2;
width: min(270px, 24vw);
border: 1px solid rgba(247, 209, 121, 0.26);
border-radius: 18px;
padding: 18px;
color: var(--ebt-text);
background:
linear-gradient(180deg, rgba(50, 38, 27, 0.82), rgba(13, 9, 8, 0.68)),
rgba(13, 9, 8, 0.74);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34), inset 0 0 30px rgba(247, 209, 121, 0.08);
backdrop-filter: blur(10px);
}
.ebt-painel-side-left {
top: 19%;
left: clamp(18px, 5vw, 82px);
}
.ebt-painel-side-right {
top: 16%;
right: clamp(18px, 5vw, 82px);
}
.ebt-painel-side span {
display: block;
color: rgba(247, 209, 121, 0.8);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ebt-painel-side strong {
display: block;
margin-top: 7px;
color: #fff4ce;
font-family: "Cinzel", Georgia, serif;
font-size: clamp(22px, 2vw, 30px);
font-weight: 900;
line-height: 1;
}
.ebt-painel-side small {
display: block;
margin-top: 9px;
color: rgba(241, 234, 217, 0.68);
font-size: 13px;
line-height: 1.45;
}
.ebt-painel-core {
position: relative;
z-index: 3;
display: grid;
justify-items: center;
width: min(100%, 720px);
padding: clamp(18px, 3vw, 34px) 0 clamp(30px, 4vw, 44px);
text-align: center;
}
.ebt-painel-logo {
position: relative;
z-index: 5;
display: grid;
place-items: center;
width: clamp(74px, 8vw, 104px);
height: clamp(74px, 8vw, 104px);
margin: 0 auto clamp(18px, 3vw, 28px);
border: 1px solid rgba(247, 209, 121, 0.32);
border-radius: 999px;
background:
radial-gradient(circle, rgba(247, 209, 121, 0.12), transparent 68%),
rgba(13, 9, 8, 0.38);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 26px rgba(247, 209, 121, 0.12);
backdrop-filter: blur(8px);
}
.ebt-painel-logo img {
display: block;
width: 72%;
height: 72%;
object-fit: contain;
}
.ebt-painel-kicker {
margin: 0 0 7px !important;
color: #f7d179 !important;
font-size: 13px !important;
font-weight: 900 !important;
letter-spacing: 0.14em !important;
line-height: 1.2 !important;
text-transform: uppercase;
}
.ebt-painel-core h2 {
margin: 0 !important;
color: #fff4ce !important;
font-family: "Cinzel", Georgia, serif;
font-size: clamp(38px, 6vw, 76px) !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
line-height: 0.95 !important;
text-transform: uppercase;
text-shadow: 0 0 28px rgba(247, 209, 121, 0.22);
}
.ebt-painel-lead {
max-width: 640px;
margin: 18px 0 0 !important;
color: rgba(241, 234, 217, 0.78) !important;
font-size: clamp(15px, 1.5vw, 18px) !important;
line-height: 1.55 !important;
}
.ebt-painel-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
margin-top: 28px;
border: 1px solid rgba(247, 209, 121, 0.42);
border-radius: 999px;
padding: 12px 22px;
color: #1a0f08 !important;
background: linear-gradient(135deg, #f7d179, #b7862d);
box-shadow: 0 15px 34px rgba(0, 0, 0, 0.32), 0 0 24px rgba(247, 209, 121, 0.22);
font-weight: 900;
text-decoration: none !important;
transition: transform 170ms ease, box-shadow 170ms ease;
}
.ebt-painel-primary:hover,
.ebt-painel-primary:focus-visible {
color: #1a0f08 !important;
outline: none;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42), 0 0 34px rgba(247, 209, 121, 0.32);
transform: translateY(-2px);
}
.ebt-painel-ops {
position: relative;
z-index: 4;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 270px));
justify-content: center;
gap: 16px;
width: min(100%, 1160px);
margin-top: 18px;
}
.ebt-painel-op {
position: relative;
display: grid;
grid-template-rows: auto 1fr;
gap: 0;
min-height: 268px;
overflow: hidden;
border: 1px solid rgba(247, 209, 121, 0.24);
border-radius: 14px;
padding: 0;
color: var(--ebt-text) !important;
background:
linear-gradient(180deg, rgba(33, 27, 28, 0.84), rgba(9, 7, 6, 0.92)),
rgba(13, 9, 8, 0.8);
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), inset 0 0 24px rgba(247, 209, 121, 0.06);
text-decoration: none !important;
transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
.ebt-painel-op::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--ebt-portal-border-angle), rgba(247, 209, 121, 0.12), rgba(255, 122, 60, 0.82), rgba(247, 209, 121, 0.82), rgba(141, 31, 29, 0.72), rgba(247, 209, 121, 0.12));
pointer-events: none;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: 0.62;
animation: ebt-portal-border-spin 6.5s linear infinite;
}
.ebt-painel-op:hover,
.ebt-painel-op:focus-visible {
border-color: rgba(247, 209, 121, 0.48);
box-shadow: 0 22px 44px rgba(0, 0, 0, 0.44), 0 0 24px rgba(247, 209, 121, 0.14);
outline: none;
transform: translateY(-3px);
}
.ebt-painel-op-media {
position: relative;
display: block;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
border-bottom: 1px solid rgba(247, 209, 121, 0.14);
background:
radial-gradient(circle at 32% 24%, rgba(247, 209, 121, 0.18), transparent 32%),
linear-gradient(135deg, rgba(91, 41, 29, 0.9), rgba(18, 12, 10, 0.94));
}
.ebt-painel-op-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.86;
filter: saturate(0.98) contrast(1.05);
transition: transform 220ms ease, opacity 220ms ease;
}
.ebt-painel-op:hover .ebt-painel-op-media img,
.ebt-painel-op:focus-visible .ebt-painel-op-media img {
opacity: 0.96;
transform: scale(1.035);
}
.ebt-painel-op-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: rgba(247, 209, 121, 0.84);
font-family: "Cinzel", Georgia, serif;
font-size: 34px;
font-weight: 900;
}
.ebt-painel-op-body {
position: relative;
z-index: 1;
display: grid;
gap: 7px;
align-content: start;
padding: 15px 16px 16px;
}
.ebt-painel-op-index {
color: rgba(247, 209, 121, 0.7);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
}
.ebt-painel-op strong {
display: block;
color: #fff4ce;
font-family: "Cinzel", Georgia, serif;
font-size: clamp(15px, 1.25vw, 18px);
font-weight: 900;
line-height: 1.2;
overflow-wrap: anywhere;
}
.ebt-painel-op small {
align-self: end;
color: rgba(241, 234, 217, 0.62);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
text-transform: none;
letter-spacing: 0;
}
.ebt-painel-embers {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.ebt-painel-embers span {
position: absolute;
bottom: -30px;
left: var(--ember-left, 50%);
width: var(--ember-size, 4px);
height: var(--ember-size, 4px);
border-radius: 50%;
background: radial-gradient(circle, #ffe0a3 0%, #ff8a3d 42%, rgba(255, 79, 35, 0) 72%);
box-shadow: 0 0 18px rgba(255, 122, 60, 0.68);
opacity: 0;
animation: ebt-ember-rise var(--ember-duration, 8s) linear infinite;
animation-delay: var(--ember-delay, 0s);
}
.ebt-painel-embers span:nth-child(1) {
--ember-left: 12%;
--ember-size: 5px;
--ember-duration: 9s;
--ember-delay: -1s;
}
.ebt-painel-embers span:nth-child(2) {
--ember-left: 27%;
--ember-size: 3px;
--ember-duration: 7s;
--ember-delay: -4s;
}
.ebt-painel-embers span:nth-child(3) {
--ember-left: 44%;
--ember-size: 6px;
--ember-duration: 10s;
--ember-delay: -6s;
}
.ebt-painel-embers span:nth-child(4) {
--ember-left: 62%;
--ember-size: 4px;
--ember-duration: 8s;
--ember-delay: -3s;
}
.ebt-painel-embers span:nth-child(5) {
--ember-left: 76%;
--ember-size: 5px;
--ember-duration: 11s;
--ember-delay: -7s;
}
.ebt-painel-embers span:nth-child(6) {
--ember-left: 90%;
--ember-size: 3px;
--ember-duration: 7.5s;
--ember-delay: -2s;
}
@keyframes ebt-ember-rise {
0% {
opacity: 0;
transform: translate3d(0, 0, 0) scale(0.45);
}
12% {
opacity: 0.92;
}
70% {
opacity: 0.46;
}
100% {
opacity: 0;
transform: translate3d(var(--ember-sway, 34px), -720px, 0) scale(1.25);
}
}
@media (max-width: 1100px) {
.ebt-painel-side {
display: none;
}
.ebt-painel-stage {
min-height: min(720px, calc(100vh - 36px));
padding-right: clamp(24px, 5vw, 54px);
padding-left: clamp(24px, 5vw, 54px);
}
.ebt-painel-ops {
grid-template-columns: repeat(auto-fit, minmax(230px, 270px));
justify-content: center;
}
}
@media (max-width: 720px) {
.ebt-painel {
padding: 18px 10px;
}
.ebt-painel-stage {
min-height: auto;
border-radius: 0;
padding: 34px 14px 18px;
}
.ebt-painel-side {
display: none;
}
.ebt-painel-core {
padding: 22px 0 24px;
}
.ebt-painel-ops {
grid-template-columns: 1fr;
}
.ebt-tab-bar {
justify-content: stretch;
}
.ebt-tab-button {
flex: 1 1 140px;
padding: 10px 12px;
font-size: 13px;
}
.ebt-summit {
padding-top: 38px;
}
.ebt-summit h2,
.ebt-guide-header h2 {
font-size: 34px;
}
.ebt-seal {
width: 76px;
height: 76px;
font-size: 33px;
}
.ebt-central-pipe {
width: 38px;
}
.ebt-station-card {
grid-template-columns: 50px minmax(0, 1fr) 24px;
gap: 13px;
padding: 17px 16px;
}
.ebt-card-icon {
width: 48px;
height: 48px;
font-size: 22px;
}
.ebt-card-title {
font-size: 16px;
}
.ebt-card-desc,
.ebt-task-copy span,
.ebt-guide-step p {
font-size: 15px;
}
.ebt-task-row {
grid-template-columns: 28px minmax(0, 1fr);
}
.ebt-rune {
grid-column: 2;
justify-self: start;
}
.ebt-guide-toggle {
grid-template-columns: 38px minmax(0, 1fr) 24px;
padding: 15px 16px;
}
.ebt-ops {
padding: 36px 16px 70px;
}
.ebt-ops-grid,
.ebt-ops-metrics,
.ebt-email-timeline,
.ebt-doc-item,
.ebt-update-line {
grid-template-columns: 1fr;
}
.ebt-email-card {
min-height: 0;
}
.ebt-email-detail summary {
grid-template-columns: 1fr;
}
.ebt-email-detail > div {
padding: 0 18px 18px;
}
.ebt-painel {
min-height: 100vh;
border-radius: 0;
padding: 32px 16px 88px;
}
.ebt-painel-card-title {
min-height: 56px;
}
}
@media (prefers-reduced-motion: reduce) {
.erderon-trilha *,
.erderon-trilha *::before,
.erderon-trilha *::after,
.ebt-painel *,
.ebt-painel *::before,
.ebt-painel *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 1ms !important;
}
}