:root {
--tre-bg: #050505;
--tre-bg-soft: #0b0906;
--tre-gold: #f4c14b;
--tre-gold-soft: rgba(244, 193, 75, 0.35);
--tre-gold-faint: rgba(244, 193, 75, 0.15);
--tre-text-main: #f7f5ef;
--tre-text-soft: #c6c0b2;

--color-eventure: #8b6bff;
--color-iron: #ff3344;
--color-store: #ffd65a;
--color-scribe: #00c4ff;
--color-gamemaster: #5cff9d;
--color-contact: #ffffff;

--color-center: #f4c14b;
--tre-red: #d84343;
}

/* TOP TOOLBAR */

.hub-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 64px;
z-index: 60;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 24px;
background: rgba(5, 5, 5, 0.85);
border-bottom: 1px solid var(--tre-gold-faint);
backdrop-filter: blur(8px);
}

.hub-brand {
display: flex;
align-items: center;
gap: 10px;
color: var(--tre-text-main);
text-decoration: none;
font-family: "Cinzel", serif;
font-weight: 800;
letter-spacing: 0.12em;
font-size: 15px;
flex-shrink: 0;
}

.hub-brand-mark {
width: 22px;
height: 22px;
border-radius: 6px;
background: linear-gradient(135deg, var(--tre-gold), #d89b2e);
}

.hub-nav {
display: flex;
gap: 18px;
flex-wrap: wrap;
justify-content: center;
}

.hub-nav a {
color: var(--tre-text-soft);
text-decoration: none;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.03em;
white-space: nowrap;
}

.hub-nav a:hover {
color: var(--tre-gold);
}

.hub-account {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}

.hub-account a {
color: var(--tre-text-soft);
text-decoration: none;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}

.hub-account a:hover {
color: var(--tre-gold);
}

.hub-account-name {
color: var(--tre-text-soft);
font-size: 13px;
white-space: nowrap;
}

.hub-account-cta {
padding: 7px 16px;
border-radius: 999px;
border: 1px solid var(--tre-gold);
color: var(--tre-gold) !important;
}

.hub-account-cta:hover {
background: var(--tre-gold);
color: #221703 !important;
}

@media (max-width: 900px) {
.hub-header {
height: auto;
flex-wrap: wrap;
padding: 12px 16px;
gap: 10px;
}

.hub-nav {
order: 3;
width: 100%;
justify-content: flex-start;
gap: 12px;
overflow-x: auto;
}

.hub-root {
margin-top: 0;
padding-top: 24px;
height: auto;
min-height: calc(100vh - 130px);
}
}

/* RESET */

*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

/* BODY */

body {
min-height: 100vh;
background: radial-gradient(circle at top, #1a1209 0, #050505 55%, #020202 100%);
color: var(--tre-text-main);
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

/* ROOT */

.hub-root {
width: 100vw;
height: calc(100vh - 64px);
margin-top: 64px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

/* ORBIT SYSTEM */

.orbit-system {
position: relative;
width: min(720px, 90vw);
height: min(720px, 90vw);
z-index: 3;
}

/* CENTER BUBBLE */

.center-bubble {
position: absolute;
top: 50%;
left: 50%;
width: 190px;
height: 190px;
transform: translate(-50%, -50%);
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 30% 0, #1b1510, #000 70%);
box-shadow:
0 0 35px rgba(0, 0, 0, 0.9),
0 0 40px var(--tre-gold-soft),
0 0 80px var(--tre-gold-faint);
border: 2px solid var(--color-center);
z-index: 5;
}

/* CENTER LOGO */

.center-logo {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}

.center-logo img {
width: 120%;
height: 120%;
object-fit: cover;
transform: translate(-2%, -1%);
filter:
drop-shadow(0 0 10px rgba(244, 193, 75, 0.35))
drop-shadow(0 0 22px rgba(244, 193, 75, 0.18));
opacity: 0.96;
}

/* OVERLAY TEXT, NOW ACTUALLY RED AND LOWER */

.center-overlay {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
font-family: "Cinzel", serif;
font-size: 28px;
font-weight: 800;
letter-spacing: 0.35em;
text-indent: 0.35em;
line-height: 1;
color: var(--tre-red) !important;
text-shadow:
0 0 10px rgba(216, 67, 67, 0.45),
0 0 24px rgba(216, 67, 67, 0.25),
0 2px 10px rgba(0, 0, 0, 0.85);
z-index: 3;
pointer-events: none;
width: max-content;
}

/* ORBIT */

.orbit {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
}

/* COLOR ASSIGNMENTS */

.eventure {
--hover-glow: var(--color-eventure);
--inner: rgba(139, 107, 255, 0.22);
}

.iron {
--hover-glow: var(--color-iron);
--inner: rgba(255, 51, 68, 0.25);
}

.store {
--hover-glow: var(--color-store);
--inner: rgba(255, 214, 90, 0.22);
}

.scribe {
--hover-glow: var(--color-scribe);
--inner: rgba(0, 196, 255, 0.22);
}

.gamemaster {
--hover-glow: var(--color-gamemaster);
--inner: rgba(92, 255, 157, 0.20);
}

.contact {
--hover-glow: var(--color-contact);
--inner: rgba(255, 255, 255, 0.10);
}

/* ORBIT ITEMS */

.orbit-item {
position: absolute;
width: 160px;
height: 160px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle at 30% 0, var(--inner), #000 70%);
box-shadow:
0 0 25px rgba(0, 0, 0, 0.9),
0 0 40px var(--tre-gold-soft),
0 0 75px var(--tre-gold-faint);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
color: var(--tre-text-main);
pointer-events: auto;
cursor: pointer;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease;
}

.orbit-item:hover {
transform: translate(-50%, -50%) scale(1.07);
box-shadow:
0 0 30px rgba(0, 0, 0, 0.9),
0 0 45px var(--tre-gold-soft),
0 0 60px var(--hover-glow),
0 0 110px var(--hover-glow);
background: radial-gradient(circle at 25% 0, var(--inner), #000 70%);
}

/* ORBIT TEXT */

.orbit-item-title {
font-weight: 800;
letter-spacing: 0.18em;
font-size: 13px;
text-transform: uppercase;
text-align: center;
}

.orbit-item-subtitle {
margin-top: 6px;
font-size: 11px;
color: var(--tre-text-soft);
text-align: center;
}

/* FEATURED GLOW */

.featured {
box-shadow:
0 0 25px rgba(0, 0, 0, 0.9),
0 0 40px var(--tre-gold-soft),
0 0 55px rgba(0, 196, 255, 0.28),
0 0 95px rgba(0, 196, 255, 0.18);
}

.featured:hover {
box-shadow:
0 0 30px rgba(0, 0, 0, 0.9),
0 0 45px var(--tre-gold-soft),
0 0 70px var(--color-scribe),
0 0 120px var(--color-scribe);
}

/* ROTATING CREED */

.creed-side {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}

.creed-side span {
display: block;
font-family: "Cinzel", serif;
font-size: clamp(13px, 1.3vw, 18px);
letter-spacing: 0.28em;
text-transform: uppercase;
color: #f4c14b;
opacity: 0.28;
white-space: nowrap;
text-shadow:
0 0 10px rgba(244, 193, 75, 0.16),
0 0 24px rgba(244, 193, 75, 0.12);
transition:
opacity 0.6s ease,
text-shadow 0.6s ease,
transform 0.6s ease;
}

.creed-side.left {
left: 28px;
}

.creed-side.left span {
writing-mode: vertical-rl;
transform: rotate(180deg) scale(1);
}

.creed-side.right {
right: 28px;
}

.creed-side.right span {
writing-mode: vertical-rl;
transform: scale(1);
}

.creed-side span.creed-fade {
opacity: 0.08;
text-shadow:
0 0 4px rgba(244, 193, 75, 0.08),
0 0 10px rgba(244, 193, 75, 0.06);
transform: scale(0.98);
}

/* TABLET */

@media (max-width: 900px) {
.creed-side.left {
left: 10px;
}

.creed-side.right {
right: 10px;
}

.creed-side span {
font-size: 11px;
letter-spacing: 0.18em;
opacity: 0.20;
}
}

/* MOBILE */

@media (max-width: 640px) {
.orbit-system {
width: min(540px, 95vw);
height: min(540px, 95vw);
}

.center-bubble {
width: 150px;
height: 150px;
}

.center-logo img {
width: 122%;
height: 122%;
transform: translate(-2%, -1%);
}

.center-overlay {
bottom: 10px;
font-size: 20px;
}

.orbit-item {
width: 130px;
height: 130px;
}

.creed-side {
display: none;
}
}

@media (max-width: 900px) {
body {
overflow-y: auto;
}
}