grows to absorb spare height so the footer is pinned to the viewport bottom on short pages (error/2FA/thin content) instead of floating mid-screen. Applies to every crystal layout (app + simple). */ body.crystal > main { flex: 1 0 auto; } .crystal *, .crystal *::before, .crystal *::after { box-sizing: border-box; } .crystal .cz { font-family: 'Cinzel', Georgia, serif; } .crystal a { color: inherit; text-decoration: none; } .crystal img { max-width: 100%; } [x-cloak] { display: none !important; } @keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 0 rgba(47,230,176,.5); } 70% { box-shadow: 0 0 0 9px rgba(47,230,176,0); } } @keyframes spinW { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes driftGlow { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-12px,-8px); } } /* Ambient set (homepage hero + page dust). bgDrift is transform-only so the layered image keeps its intended opacity. dustFall/dustRise are soft round dust motes drifting in the god-ray light — hero dust falls, page-wrapper dust rises. */ @keyframes dustFall { 0% { transform: translate(0,0); opacity: 0; } 10% { opacity: .9; } 88% { opacity: .6; } 100% { transform: translate(16px,408px); opacity: 0; } } @keyframes dustRise { 0% { transform: translate(0,0); opacity: 0; } 16% { opacity: .55; } 84% { opacity: .4; } 100% { transform: translate(-12px,-175px); opacity: 0; } } @keyframes rayShimmer { 0%,100% { opacity: .28; transform: translateX(0) skewX(-12deg); } 50% { opacity: .62; transform: translateX(18px) skewX(-12deg); } } @keyframes bgDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px,12px) scale(1.08); } } /* ---- Layout shell -------------------------------------------------------- */ .crystal .cc-shell { width: min(var(--cc-shell), 100%); margin: 0 auto; /* Trimmed side padding so the nav + content flow closer to the screen edges and line up with the hero panel. Nav, main and footer all use .cc-shell, so their left/right bounds stay identical. */ padding: 0 clamp(14px, 3vw, 28px); } .crystal .cc-page { padding: clamp(20px, 4vw, 40px) 0 56px; } /* ---- Top navigation ------------------------------------------------------ */ .crystal .cc-nav { position: sticky; top: 0; z-index: 50; background: var(--cc-nav-bg); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--cc-hair); } .crystal .cc-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; } .crystal .cc-brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .crystal .cc-brand-mark { filter: drop-shadow(0 0 9px rgba(47,230,200,.55)); } .crystal .cc-brand-name { font-size: 18px; font-weight: 800; letter-spacing: .12em; color: var(--cc-t-bright); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; } /* flex:1 + min-width:0 lets the link row absorb the leftover space between the brand and the right-hand actions. NOTE: overflow MUST stay visible here — these links host the Rankings hover dropdown (a .cc-menu that opens downward), and any `overflow-x:auto` forces overflow-y to compute to `auto` too, which clips the dropdown so it appears not to open. The account/language dropdowns live in the un-clipped .cc-nav-actions, which is why only Rankings was affected. */ .crystal .cc-navlinks { display: flex; align-items: center; justify-content: center; gap: 18px; flex: 1 1 0; min-width: 0; overflow: visible; padding: 4px 10px; } .crystal .cc-brand, .crystal .cc-nav-actions { flex-shrink: 0; } .crystal .cc-navlink { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a7cdd6; white-space: nowrap; transition: color .2s, text-shadow .2s; cursor: pointer; } .crystal .cc-navlink:hover { color: var(--cc-t-bright); text-shadow: 0 0 14px rgba(47,230,192,.5); } .crystal .cc-navlink.is-active { color: var(--cc-teal); text-shadow: 0 0 14px rgba(47,230,192,.45); } .crystal .cc-nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Coin badge in the nav */ .crystal .cc-coin { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--cc-r-control); background: rgba(47,230,180,.08); border: 1px solid rgba(47,230,180,.25); font-size: 12px; font-weight: 700; color: var(--cc-bright); white-space: nowrap; } /* Avatar / account pill */ .crystal .cc-userpill { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 30px; background: rgba(7,20,30,.6); border: 1px solid var(--cc-hair-strong); font-size: 12px; font-weight: 700; color: var(--cc-t-head); cursor: pointer; } .crystal .cc-userpill .cc-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(4,12,20,.6); border: 1px solid rgba(95,200,205,.3); } .crystal .cc-icon-btn { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(8,24,36,.5); border: 1px solid var(--cc-hair-strong); color: #bcdde2; cursor: pointer; transition: all .25s; font-size: .95rem; } .crystal .cc-icon-btn:hover { border-color: rgba(47,230,192,.4); color: var(--cc-teal); box-shadow: 0 0 14px rgba(47,230,192,.2); } /* Dropdown menu panel (account / language) */ .crystal .cc-menu { position: absolute; right: 0; top: 100%; margin-top: 10px; min-width: 200px; z-index: 60; background: rgba(5,14,22,.97); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--cc-hair-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 22px 60px rgba(0,0,0,.6); } .crystal .cc-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; font-size: 13px; font-weight: 600; color: var(--cc-t-body); transition: background .2s, color .2s; } .crystal .cc-menu-item:hover { background: rgba(47,230,192,.06); color: var(--cc-t-bright); } .crystal .cc-menu-head { padding: 12px 16px; border-bottom: 1px solid var(--cc-hair-2); background: rgba(0,0,0,.2); } /* Rich nav dropdown rows (Rankings: icon box + title + subtitle) */ .crystal .cc-rich-item { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 10px; border: 1px solid transparent; transition: background .18s, border-color .18s; } .crystal .cc-rich-item:hover { background: rgba(47,230,192,.07); border-color: rgba(47,230,192,.22); } .crystal .cc-rich-item.is-active { background: linear-gradient(135deg, rgba(47,230,192,.16), rgba(47,230,192,.04)); border-color: rgba(47,230,192,.3); } .crystal .cc-rich-ic { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(7,20,30,.6); border: 1px solid var(--cc-hair-strong); color: var(--cc-t-body); transition: all .18s; } .crystal .cc-rich-item:hover .cc-rich-ic, .crystal .cc-rich-item.is-active .cc-rich-ic { color: var(--cc-teal); background: rgba(47,230,192,.12); border-color: rgba(47,230,192,.3); } .crystal .cc-rich-title { font-size: 13px; font-weight: 700; color: var(--cc-t-head); } .crystal .cc-rich-sub { font-size: 10.5px; color: #7fa6b1; margin-top: 1px; } /* Burger (mobile) */ .crystal .cc-burger { display: none; width: 38px; height: 38px; } .crystal .cc-mobile-nav { display: none; } .crystal .cc-mobile-nav.is-open { display: block; } /* ---- Console frame + title row ------------------------------------------ */ .crystal .cc-frame { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--cc-hair); background: var(--cc-frame-radial), var(--cc-surface); box-shadow: 0 40px 120px rgba(0,0,0,.5); } .crystal .cc-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } /* ---- Shared Dragon-Shop console card (ds-*) ------------------------------------ Lifted from dragon-shop.blade.php's in-file