:root {
  --bg: #050815;
  --panel: rgba(6, 10, 26, .74);
  --panel2: rgba(12, 16, 36, .84);
  --line: rgba(177, 107, 255, .34);
  --line-soft: rgba(255,255,255,.08);
  --purple: #9c59ff;
  --purple2: #6f38ff;
  --cyan: #4bdcff;
  --green: #29f38a;
  --red: #ff496d;
  --gold: #ffcb4d;
  --text: #f7f3ff;
  --muted: #b9b3ca;
  --shadow: 0 30px 90px rgba(0,0,0,.52);
  --radius: 22px;
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button { font: inherit; color: inherit; cursor:pointer; }
img { display:block; max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.app-shell {
  position:relative;
  min-height:100vh;
  width:100vw;
  overflow:hidden;
  isolation:isolate;
  background: radial-gradient(circle at 50% 45%, rgba(123,65,255,.12), transparent 52%), #050815;
}
.scene-bg { position:absolute; inset:58px 0 100px; width:100%; height:calc(100% - 158px); object-fit:cover; z-index:-5; filter:saturate(1.18) contrast(1.08) brightness(.78); transform:scale(1.025); }
.scene-vignette { position:absolute; inset:0; z-index:-4; background: radial-gradient(ellipse at center, transparent 28%, rgba(4,7,18,.20) 58%, rgba(1,2,8,.74) 100%), linear-gradient(90deg, rgba(2,4,12,.62), transparent 26%, transparent 72%, rgba(2,4,12,.66)), linear-gradient(180deg, rgba(3,5,14,.44), transparent 18%, transparent 68%, rgba(4,6,16,.64)); }
.scene-sparkles { position:absolute; inset:60px 0 100px; z-index:-3; opacity:.42; background-image: radial-gradient(circle at 12% 24%, rgba(255,255,255,.7) 0 1px, transparent 1.5px), radial-gradient(circle at 69% 16%, rgba(88,218,255,.8) 0 1px, transparent 1.5px), radial-gradient(circle at 74% 52%, rgba(198,109,255,.75) 0 1px, transparent 1.5px), radial-gradient(circle at 29% 69%, rgba(255,209,92,.7) 0 1px, transparent 1.5px); background-size: 240px 180px, 320px 240px, 260px 220px, 380px 300px; animation: drift 18s linear infinite; }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-42px, 18px, 0); } }

.glass-panel { background: linear-gradient(180deg, rgba(12, 15, 34, .82), rgba(5, 8, 22, .72)); border:1px solid var(--line); box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.035); backdrop-filter: blur(18px); border-radius: var(--radius); }

.topbar { position:relative; z-index:20; height:60px; display:grid; grid-template-columns: 220px auto minmax(360px, 1fr) auto auto auto auto; align-items:center; gap:12px; padding:10px 18px; background:linear-gradient(180deg, rgba(5,7,18,.96), rgba(4,6,16,.84)); border-bottom:1px solid rgba(139,99,255,.24); box-shadow:0 14px 38px rgba(0,0,0,.36); }
.brand { border:0; background:transparent; display:flex; align-items:center; gap:12px; min-width:0; padding:0; }
.brand-mark { width:40px; height:40px; border-radius:13px; display:grid; place-items:center; font-size:24px; font-weight:1000; background: radial-gradient(circle at 28% 18%, #c9ffff, #945bff 36%, #4017a1 72%); box-shadow:0 0 24px rgba(152,87,255,.86), inset 0 0 14px rgba(255,255,255,.22); }
.brand-copy { display:flex; flex-direction:column; align-items:flex-start; line-height:1; }
.brand-copy strong { font-size:21px; letter-spacing:.06em; }
.brand-copy small { margin-top:5px; color:#cbc5df; font-size:9px; letter-spacing:.13em; }
.topnav { display:flex; align-items:center; gap:8px; min-width:0; }
.topnav button { border:0; background:transparent; color:#f5f1ff; text-transform:uppercase; font-weight:900; font-size:13px; letter-spacing:.04em; padding:13px 9px; border-radius:13px; white-space:nowrap; transition:transform .15s ease, background .15s ease, color .15s ease; }
.topnav button:hover { transform:translateY(-1px); background:rgba(151,89,255,.18); color:#fff; }
.topnav span { margin-right:6px; filter:drop-shadow(0 0 9px rgba(150,90,255,.8)); }
b, .topnav b, .dock-item b { display:inline-grid; place-items:center; min-width:18px; height:18px; border-radius:999px; background:var(--green); color:#001408; font-size:10px; font-weight:1000; margin-left:4px; box-shadow:0 0 12px rgba(41,243,138,.48); padding:0 5px; }
b.danger, .topnav b.danger, .dock-item b.danger { background:var(--red); color:#fff; box-shadow:0 0 12px rgba(255,73,109,.55); }
.global-search { height:38px; border:1px solid rgba(143,156,192,.26); border-radius:13px; display:grid; grid-template-columns:1fr 38px; overflow:hidden; background:rgba(4,7,18,.72); min-width:230px; }
.global-search input { border:0; outline:0; background:transparent; color:#fff; padding:0 14px; font-size:13px; }
.global-search input::placeholder { color:#9298ab; }
.global-search button { border:0; background:transparent; color:#acb5d4; }
.wallet { display:flex; align-items:center; gap:14px; white-space:nowrap; font-size:13px; }
.wallet strong { font-weight:1000; }
.top-icon { position:relative; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); display:grid; place-items:center; }
.top-icon:hover { background:rgba(151,89,255,.22); box-shadow:0 0 20px rgba(151,89,255,.28); }
.top-icon em { position:absolute; top:0; right:-3px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--red); color:#fff; font-style:normal; font-size:10px; font-weight:1000; }
.top-avatar { border:0; background:transparent; display:flex; align-items:center; gap:9px; text-align:left; white-space:nowrap; padding:0; }
.top-avatar-medal { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background: radial-gradient(circle, rgba(255,205,75,.30), rgba(129,68,255,.40)); border:2px solid var(--purple); box-shadow:0 0 18px rgba(151,89,255,.72); }
.top-avatar strong { display:block; font-size:13px; }
.top-avatar small { display:block; font-size:10px; color:#c5bed8; margin-top:2px; }

.grand-plaza { position:relative; z-index:2; height:calc(100vh - 158px); min-height:610px; display:grid; grid-template-columns: 335px minmax(560px, 1fr) 335px; gap:18px; padding:18px 20px 8px; }
.profile-panel { padding:16px; display:flex; flex-direction:column; min-height:0; }
.xp-readout { display:flex; justify-content:space-between; align-items:center; margin:0 0 7px; font-size:12px; color:#ddd6ec; }
.xp-readout strong { color:#8f8aa0; }
.xp-bar { height:9px; border-radius:999px; background:rgba(255,255,255,.13); overflow:hidden; }
.xp-bar span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, #9148ff, #e866ff); box-shadow:0 0 20px rgba(197,84,255,.75); }
.avatar-select-stage { position:relative; flex:1; min-height:360px; display:grid; grid-template-columns:minmax(0, 1fr); margin:14px 0 10px; }
.avatar-stage-core { position:relative; overflow:hidden; border-radius:24px; background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); }
.avatar-stage-core::before { content:""; position:absolute; left:50%; bottom:15px; width:82%; height:64px; border-radius:50%; z-index:1; background:conic-gradient(from 0deg, rgba(255,255,255,.88), rgba(159,85,255,.95), rgba(72,221,255,.75), rgba(68,30,170,.62), rgba(255,255,255,.88)); box-shadow:0 0 30px rgba(151,89,255,.62), 0 0 56px rgba(72,221,255,.18), inset 0 0 20px rgba(255,255,255,.18); opacity:.78; transform:translateX(-50%) perspective(280px) rotateX(67deg); animation:avatarPlatformSpin 7s linear infinite; }
.avatar-stage-core::after { content:""; position:absolute; left:50%; bottom:31px; width:52%; height:24px; border-radius:50%; z-index:1; background:radial-gradient(ellipse at center, rgba(255,255,255,.32), rgba(116,59,255,.30) 45%, transparent 72%); transform:translateX(-50%); filter:blur(1px); }
#avatarCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:3; }
.avatar-fallback { position:absolute; inset:0; display:none; z-index:2; }
.avatar-glow-ring { position:absolute; left:50%; bottom:10px; width:82%; height:48px; transform:translateX(-50%); border:2px solid rgba(207,155,255,.92); border-radius:50%; z-index:4; background:radial-gradient(ellipse at center, rgba(171,68,255,.30), rgba(109,49,221,.10) 58%, transparent 59%); box-shadow:0 0 28px rgba(171,85,255,.86), inset 0 0 18px rgba(255,255,255,.13); animation:ringPulse 2.5s ease-in-out infinite; }
.avatar-stage-core.is-loading::before,
.avatar-stage-core.is-loading::after,
.avatar-stage-core.is-loading .avatar-glow-ring { opacity:0; }
.avatar-stage-core.is-ready { box-shadow:inset 0 -40px 80px rgba(70,22,154,.10), inset 0 0 0 1px rgba(255,255,255,.035); }
@keyframes ringPulse { 0%,100% { transform:translateX(-50%) scaleX(1); opacity:.86; } 50% { transform:translateX(-50%) scaleX(1.06); opacity:1; } }
@keyframes avatarPlatformSpin { 0% { transform:translateX(-50%) perspective(280px) rotateX(67deg) rotateZ(0deg); } 100% { transform:translateX(-50%) perspective(280px) rotateX(67deg) rotateZ(360deg); } }
.avatar-selector-row { display:grid; grid-template-columns:40px 1fr 40px; align-items:center; gap:8px; margin:2px 0 12px; padding:7px; border:1px solid rgba(192,125,255,.42); border-radius:16px; background:linear-gradient(180deg, rgba(7,11,28,.74), rgba(12,16,36,.58)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), 0 0 22px rgba(151,89,255,.16); }
.avatar-selector-button { width:40px; height:40px; border-radius:12px; border:1px solid rgba(224,202,255,.58); background:linear-gradient(180deg, rgba(166,91,255,.92), rgba(87,35,194,.88)); color:#fff; font-size:28px; line-height:1; font-weight:1000; display:grid; place-items:center; box-shadow:0 0 20px rgba(151,89,255,.30), inset 0 0 0 1px rgba(255,255,255,.12); }
.avatar-selector-button:hover { transform:translateY(-1px); box-shadow:0 0 28px rgba(151,89,255,.48), inset 0 0 0 1px rgba(255,255,255,.16); }
.avatar-selector-current { min-width:0; text-align:center; line-height:1.05; }
.avatar-selector-current span { display:block; color:#d6caf4; font-size:9px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.avatar-selector-current strong { display:block; margin-top:3px; color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.03em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar-selector-current small { display:block; margin-top:4px; color:#bff6ff; font-size:10px; font-weight:800; }
.profile-builder-button { height:54px; border:1px solid rgba(190,108,255,.74); background:linear-gradient(90deg, rgba(112,43,211,.90), rgba(171,72,255,.82)); border-radius:15px; color:#fff; text-transform:uppercase; font-weight:1000; letter-spacing:.03em; box-shadow:0 0 30px rgba(151,89,255,.32); display:grid; place-items:center; }
.profile-builder-button:hover { transform:translateY(-1px); box-shadow:0 0 36px rgba(151,89,255,.48); }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.profile-stats article { min-height:78px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; background:rgba(5,8,20,.52); border:1px solid rgba(255,255,255,.07); border-radius:15px; }
.profile-stats span { font-size:24px; filter:drop-shadow(0 0 10px rgba(255,210,82,.45)); }
.profile-stats strong { font-size:13px; }
.profile-stats small { color:#c0b8d2; font-size:10px; text-transform:uppercase; }

.plaza-stage { position:relative; min-width:0; display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding-top:12px; }
.headline-block { text-align:center; text-shadow:0 4px 24px rgba(0,0,0,.58); }
.headline-block h1 { margin:0; text-transform:uppercase; font-size:clamp(46px, 4.2vw, 68px); line-height:.95; letter-spacing:.04em; background:linear-gradient(180deg, #fff, #cdd6ff 44%, #a76cff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 22px rgba(151,89,255,.72)); }
.headline-block h2 { margin:10px 0 0; font-size:clamp(23px, 1.8vw, 32px); }
.headline-block p { margin:8px 0 0; font-size:clamp(16px, 1.25vw, 21px); color:#f3ecff; }
.gtix-stage-cta { position:absolute; left:50%; top:57%; z-index:8; min-width:310px; min-height:76px; transform:translate(-50%, -50%); display:grid; grid-template-columns:60px 1fr; align-items:center; gap:14px; padding:10px 22px 10px 12px; border-radius:26px; border:1px solid rgba(255,238,170,.95); color:#fff; text-decoration:none; background:linear-gradient(135deg, rgba(255,215,91,.98), rgba(205,119,17,.96) 42%, rgba(129,52,255,.92) 100%); box-shadow:0 0 34px rgba(255,203,77,.62), 0 0 56px rgba(151,89,255,.38), inset 0 0 0 1px rgba(255,255,255,.28); overflow:hidden; text-shadow:0 2px 10px rgba(0,0,0,.34); animation:gtixFloat 3.4s ease-in-out infinite; }
.gtix-stage-cta::before { content:""; position:absolute; inset:-80% -28%; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 47%, transparent 58%); transform:translateX(-46%); animation:gtixShine 4.8s ease-in-out infinite; }
.gtix-stage-cta::after { content:""; position:absolute; inset:5px; border-radius:22px; border:1px solid rgba(255,255,255,.20); pointer-events:none; }
.gtix-stage-cta:hover { transform:translate(-50%, -54%) scale(1.035); box-shadow:0 0 44px rgba(255,203,77,.74), 0 0 76px rgba(151,89,255,.56), inset 0 0 0 1px rgba(255,255,255,.34); }
.gtix-stage-coin { position:relative; z-index:1; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 32% 24%, #fff9be, #ffd350 40%, #b66a12 72%, #401800 100%); color:#2b1300; font-size:32px; font-weight:1000; box-shadow:0 0 24px rgba(255,229,127,.72), inset 0 0 12px rgba(255,255,255,.40); }
.gtix-stage-cta span:not(.gtix-stage-coin) { position:relative; z-index:1; display:flex; flex-direction:column; line-height:1.02; }
.gtix-stage-cta strong { font-size:24px; text-transform:uppercase; letter-spacing:.045em; }
.gtix-stage-cta small { margin-top:6px; color:#fff8d5; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
@keyframes gtixFloat { 0%,100% { margin-top:0; } 50% { margin-top:-7px; } }
@keyframes gtixShine { 0%,58% { transform:translateX(-62%); opacity:0; } 70% { opacity:.88; } 100% { transform:translateX(78%); opacity:0; } }
.integrated-actions { width:100%; display:grid; grid-template-columns: 1fr 1.45fr 1fr; gap:14px; margin-top:auto; padding-bottom:8px; }
.action-card { min-height:138px; display:grid; grid-template-columns:112px 1fr; overflow:hidden; border-radius:19px; border:1px solid rgba(178,106,255,.40); background:linear-gradient(180deg, rgba(10,13,29,.76), rgba(5,8,22,.68)); box-shadow:0 18px 42px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.035); backdrop-filter:blur(16px); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.action-card:hover { transform:translateY(-4px); border-color:rgba(197,128,255,.70); box-shadow:0 24px 54px rgba(0,0,0,.38), 0 0 28px rgba(151,89,255,.24); }
.action-card-art { position:relative; overflow:hidden; }
.action-card-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(7,8,20,.50)); }
.action-card-art img { width:100%; height:100%; object-fit:cover; filter:saturate(1.15) contrast(1.06) brightness(.78); }
.action-card-body { padding:13px 14px; display:flex; flex-direction:column; min-width:0; }
.action-card-body b { align-self:flex-start; margin:0 0 8px; height:auto; min-width:0; padding:6px 10px; border-radius:999px; background:linear-gradient(90deg, rgba(135,59,255,.92), rgba(211,83,255,.76)); color:#fff; font-size:10px; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 0 18px rgba(151,89,255,.40); }
.action-card-body h3 { margin:0; font-size:18px; line-height:1.06; text-transform:uppercase; }
.action-card-body p { margin:7px 0 10px; color:#d1c9df; font-size:12px; line-height:1.35; }
.action-card-body span { margin-top:auto; display:inline-flex; align-items:center; justify-content:center; width:max-content; min-width:116px; height:34px; padding:0 14px; border-radius:10px; background:linear-gradient(180deg, #a344ff, #6b28d4); font-size:11px; text-transform:uppercase; font-weight:1000; box-shadow:0 0 20px rgba(151,89,255,.34); }
.action-card.inventory .action-card-body span { background:linear-gradient(180deg, #33d7ff, #0877ae); }
.action-card.mall .action-card-body span { background:linear-gradient(180deg, #ffe777, #ba7a0c); }

.events-panel { padding:16px; display:flex; flex-direction:column; overflow:hidden; }
.events-panel header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.events-panel h2 { margin:0; font-size:20px; text-transform:uppercase; letter-spacing:.04em; }
.events-panel header button { border:0; background:transparent; color:#e7dfff; font-weight:800; }
.event-list { display:flex; flex-direction:column; gap:12px; overflow:auto; padding-right:2px; }
.event-row { position:relative; isolation:isolate; min-height:118px; border-radius:18px; border:1px solid rgba(255,203,77,.48); overflow:hidden; padding:16px 72px 16px 16px; display:flex; align-items:flex-end; background:#050714; box-shadow:0 16px 30px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.04); }
.event-row.live { border-color:rgba(255,82,101,.66); }
.event-row.upcoming { border-color:rgba(255,203,77,.66); }
.event-row img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:saturate(1.22) contrast(1.08) brightness(.86); transform:scale(1.035); transition:transform .22s ease, filter .22s ease; }
.event-row::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(2,4,12,.82) 0%, rgba(5,7,18,.48) 48%, rgba(5,7,18,.70) 100%), linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.70) 100%); }
.event-row:hover img { transform:scale(1.07); filter:saturate(1.32) contrast(1.12) brightness(.96); }
.event-row div { position:relative; z-index:2; min-width:0; text-shadow:0 2px 12px rgba(0,0,0,.82); }
.event-row h3 { margin:0; text-transform:uppercase; font-size:17px; line-height:1; }
.event-row p { margin:5px 0; color:#d5ccd9; font-size:12px; text-transform:uppercase; }
.event-row strong { color:var(--gold); font-size:12px; text-transform:uppercase; }
.event-row > span { position:absolute; z-index:3; right:12px; top:50%; transform:translateY(-50%); border-radius:999px; padding:8px 10px; font-size:10px; font-weight:1000; text-transform:uppercase; background:linear-gradient(180deg, #ff5578, #c71842); box-shadow:0 0 18px rgba(255,73,109,.42); }
.event-row.upcoming > span { background:linear-gradient(180deg, #ffda6a, #bd7314); box-shadow:0 0 18px rgba(255,203,77,.38); }
.activity-panel-body { display:flex; flex-direction:column; gap:12px; min-height:0; flex:1; overflow:hidden; }
.side-panel-tools { display:grid; gap:10px; margin-bottom:10px; }
.side-panel-tools input { width:100%; height:40px; border:1px solid rgba(178,106,255,.32); border-radius:12px; background:rgba(4,7,18,.74); color:#fff; padding:0 12px; outline:0; }
.side-panel-tools input::placeholder { color:#9d96b2; }
.friend-request-row { display:grid; grid-template-columns:1fr 96px; gap:8px; }
.friend-request-row button { min-height:40px; border:0; border-radius:12px; background:linear-gradient(180deg, #ffdc73, #b96d12); color:#241100; font-weight:1000; text-transform:uppercase; }
.side-panel-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.side-panel-actions button, .side-panel-actions a, .panel-primary-action { min-height:38px; border:0; border-radius:12px; background:linear-gradient(180deg, #a348ff, #6426cd); color:#fff; display:grid; place-items:center; text-decoration:none; font-weight:1000; text-transform:uppercase; font-size:11px; box-shadow:0 0 18px rgba(151,89,255,.22); }
.side-panel-actions .secondary { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); }
.side-panel-list { display:flex; flex-direction:column; gap:10px; overflow:auto; padding-right:2px; min-height:0; }
.side-card { border:1px solid rgba(178,106,255,.25); border-radius:16px; background:linear-gradient(180deg, rgba(14,18,42,.76), rgba(5,8,22,.66)); padding:12px; box-shadow:0 14px 28px rgba(0,0,0,.25); }
.side-card h3 { margin:0; font-size:14px; text-transform:uppercase; letter-spacing:.03em; }
.side-card p { margin:6px 0 0; color:#d2cadf; font-size:12px; line-height:1.35; }
.side-card small { display:block; margin-top:5px; color:#ffdc77; font-size:10px; font-weight:900; text-transform:uppercase; }
.identity-row { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; }
.identity-avatar { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 32% 24%, #fff, #a765ff 42%, #32117a 100%); color:#fff; font-weight:1000; box-shadow:0 0 16px rgba(151,89,255,.34); }
.identity-avatar img { width:100%; height:100%; object-fit:cover; }
.status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; background:#667086; box-shadow:none; }
.status-dot.online { background:var(--green); box-shadow:0 0 12px rgba(41,243,138,.42); }
.message-thread { min-height:170px; max-height:230px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(0,0,0,.20); }
.chat-bubble { max-width:86%; padding:9px 10px; border-radius:14px; color:#fff; background:rgba(255,255,255,.09); font-size:12px; line-height:1.35; }
.chat-bubble.mine { align-self:flex-end; background:linear-gradient(180deg, rgba(151,89,255,.90), rgba(93,42,204,.90)); }
.message-compose { display:grid; grid-template-columns:1fr 44px; gap:8px; margin-top:10px; }
.message-compose input { min-height:42px; border:1px solid rgba(178,106,255,.32); border-radius:13px; background:rgba(4,7,18,.78); color:#fff; padding:0 12px; outline:0; }
.message-compose button { border:0; border-radius:13px; background:linear-gradient(180deg, #ffdc73, #b96d12); color:#241100; font-weight:1000; }
.streaming-ad-slot { flex:0 0 auto; border:1px solid rgba(75,220,255,.30); border-radius:18px; padding:13px; background:linear-gradient(135deg, rgba(75,220,255,.14), rgba(151,89,255,.18)); box-shadow:0 14px 32px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.035); }
.streaming-ad-slot span { color:#7ff0ff; font-size:10px; font-weight:1000; text-transform:uppercase; letter-spacing:.08em; }
.streaming-ad-slot strong { display:block; margin-top:5px; text-transform:uppercase; }
.streaming-ad-slot p { margin:6px 0 10px; color:#d7d0e5; font-size:12px; line-height:1.35; }
.streaming-ad-slot button { min-height:34px; border:0; border-radius:11px; padding:0 12px; background:linear-gradient(180deg, #36d8ff, #087ab0); color:#fff; font-weight:1000; text-transform:uppercase; }
.events-panel.is-collapsed .activity-panel-body { display:none; }
.events-panel.is-collapsed { align-self:start; min-height:64px; opacity:.84; }

.bottom-dock { position:relative; z-index:25; height:98px; margin:0 20px 16px; border:1px solid rgba(181,91,255,.44); border-radius:26px; display:grid; grid-template-columns:86px 130px 130px 130px minmax(220px, 330px) 130px 130px 130px 1fr 250px; gap:8px; align-items:center; padding:10px 12px; background:linear-gradient(180deg, rgba(8,12,28,.86), rgba(5,8,22,.78)); box-shadow:var(--shadow), inset 0 0 0 1px rgba(255,255,255,.035), 0 0 34px rgba(123,55,255,.18); backdrop-filter:blur(20px); }
.start-button { width:76px; height:76px; border-radius:50%; border:2px solid rgba(196,109,255,.88); background:radial-gradient(circle at 34% 23%, #fff, #b46fff 30%, #6828d4 68%, #180634); box-shadow:0 0 38px rgba(151,89,255,.86), inset 0 0 22px rgba(255,255,255,.22); display:grid; place-items:center; justify-self:start; }
.start-button span { font-size:46px; font-weight:1000; }
.dock-item { position:relative; height:70px; border:0; border-radius:20px; background:rgba(255,255,255,.045); display:grid; grid-template-rows:auto auto auto; place-items:center; color:#fff; text-align:center; transition:transform .15s ease, background .15s ease; }
.dock-item:hover { transform:translateY(-3px); background:rgba(151,89,255,.16); }
.dock-item.is-active { background:rgba(151,89,255,.24); box-shadow:0 0 24px rgba(151,89,255,.28), inset 0 0 0 1px rgba(118,211,255,.42); }
.dock-item span { font-size:23px; filter:drop-shadow(0 0 10px rgba(151,89,255,.58)); }
.dock-item strong { font-size:12px; text-transform:uppercase; letter-spacing:.045em; }
.dock-item small { font-size:10px; color:#c1bbd4; }
.dock-item b { position:absolute; top:8px; right:24px; }
.dock-cta { height:72px; border:1px solid rgba(196,109,255,.72); border-radius:30px; background:linear-gradient(180deg, rgba(128,63,255,.88), rgba(75,31,153,.86)); display:grid; grid-template-columns:1fr 44px; grid-template-rows:1fr 1fr; align-items:center; padding:10px 16px 10px 24px; box-shadow:0 0 36px rgba(151,89,255,.38), inset 0 0 0 1px rgba(255,255,255,.08); }
.dock-cta strong { font-size:20px; text-transform:uppercase; letter-spacing:.035em; align-self:end; }
.dock-cta small { color:#d7cbff; font-size:12px; align-self:start; }
.dock-cta span { grid-column:2; grid-row:1/3; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:32px; background:rgba(0,0,0,.28); }
.browse-games { grid-column:10; height:74px; border:1px solid rgba(238,222,255,.92); border-radius:28px; background:linear-gradient(180deg, rgba(165,89,255,.96), rgba(101,43,213,.94)); color:#fff; display:grid; grid-template-columns:56px 1fr; grid-template-rows:1fr 1fr; align-items:center; padding:10px 18px; text-align:left; box-shadow:0 0 36px rgba(151,89,255,.48), inset 0 0 0 1px rgba(255,255,255,.14); justify-self:stretch; }
.browse-games:hover { transform:translateY(-2px); box-shadow:0 0 48px rgba(151,89,255,.64); background:linear-gradient(180deg, rgba(186,119,255,.98), rgba(119,55,232,.96)); }
.browse-games span { grid-row:1/3; font-size:34px; filter:drop-shadow(0 0 14px rgba(255,255,255,.35)); }
.browse-games strong { font-size:19px; text-transform:none; line-height:.95; }
.browse-games small { color:#efe6ff; font-size:12px; }

.toast { position:fixed; left:50%; bottom:118px; z-index:90; transform:translateX(-50%) translateY(20px); opacity:0; transition:opacity .18s ease, transform .18s ease; border:1px solid rgba(178,106,255,.45); background:rgba(6,9,23,.88); color:#fff; padding:12px 16px; border-radius:14px; box-shadow:var(--shadow); pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.modal-dialog { width:min(920px, calc(100vw - 36px)); border:0; padding:0; background:transparent; color:#fff; }
#gamesDialog { width:min(1420px, calc(100vw - 36px)); }
#gameDetailDialog { width:min(980px, calc(100vw - 36px)); }
#watchDialog, #notificationsDialog { width:min(980px, calc(100vw - 36px)); }
.modal-dialog::backdrop { background:rgba(0,0,0,.64); backdrop-filter:blur(8px); }
.modal-shell { border:1px solid rgba(178,106,255,.45); border-radius:24px; background:linear-gradient(180deg, rgba(12,15,34,.96), rgba(5,8,22,.94)); box-shadow:var(--shadow), 0 0 40px rgba(151,89,255,.22); padding:18px; }
.modal-shell header { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; }
.modal-shell h2 { margin:0; font-size:28px; text-transform:uppercase; letter-spacing:.04em; color:#d0a1ff; }
.modal-shell header button { width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); }
.modal-note { border:1px dashed rgba(208,161,255,.34); border-radius:16px; padding:16px; color:#d8d0e7; background:rgba(5,8,22,.54); }
.world-grid, .game-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.world-grid button { min-height:108px; border:1px solid rgba(178,106,255,.35); border-radius:18px; background:linear-gradient(180deg, rgba(20,24,52,.72), rgba(8,10,26,.68)); display:grid; grid-template-columns:56px 1fr; grid-template-rows:1fr 1fr; align-items:center; text-align:left; padding:16px; }
.world-grid span { grid-row:1/3; font-size:34px; }
.world-grid strong { font-size:18px; text-transform:uppercase; }
.world-grid small { color:#c6bfd9; }
.games-shell { max-height:88vh; display:flex; flex-direction:column; }
.game-browser-tools { display:grid; grid-template-columns:250px minmax(260px, 1fr) auto; align-items:end; gap:12px; margin-bottom:16px; }
.game-browser-tools .field { display:flex; flex-direction:column; gap:7px; margin:0; color:#d8d0ef; font-size:12px; text-transform:uppercase; font-weight:900; letter-spacing:.05em; }
.game-browser-tools select,
.game-browser-tools input { width:100%; min-height:44px; border:1px solid rgba(178,106,255,.34); border-radius:14px; background:rgba(4,7,18,.78); color:#fff; padding:0 13px; outline:0; }
.game-browser-tools input::placeholder { color:#9d96b2; }
.game-result-count { min-height:44px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,203,77,.34); border-radius:14px; padding:0 14px; color:#ffdc77; font-weight:1000; text-transform:uppercase; white-space:nowrap; background:rgba(255,203,77,.08); }
.game-grid { grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); overflow:auto; max-height:calc(88vh - 170px); padding:0 4px 4px 0; }
.game-card { min-height:310px; border:1px solid rgba(255,255,255,.10); border-radius:20px; background:linear-gradient(180deg, rgba(18,22,48,.82), rgba(7,10,24,.78)); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 18px 36px rgba(0,0,0,.28); }
.game-card-art { position:relative; min-height:132px; overflow:hidden; background:radial-gradient(circle at 50% 35%, rgba(151,89,255,.46), rgba(5,8,22,.68)); }
.game-card-art img { width:100%; height:100%; min-height:132px; object-fit:cover; filter:saturate(1.1) brightness(.84); }
.game-card-art::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(4,6,16,.66)); }
.game-card-badges { position:absolute; left:10px; right:10px; bottom:10px; z-index:2; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.game-card-badges span { border-radius:999px; padding:6px 8px; font-size:10px; font-weight:1000; text-transform:uppercase; background:rgba(6,9,22,.78); border:1px solid rgba(255,255,255,.12); }
.game-card-body { flex:1; padding:13px; display:flex; flex-direction:column; gap:8px; }
.game-card h3 { margin:0; text-transform:uppercase; line-height:1.08; font-size:18px; }
.game-card p { margin:0; color:#c6bfd8; font-size:12px; line-height:1.35; }
.game-rating { color:#ffdc73; font-size:13px; letter-spacing:.05em; font-weight:1000; }
.game-meta-row { display:flex; justify-content:space-between; gap:8px; color:#cfc7dd; font-size:11px; text-transform:uppercase; font-weight:800; }
.game-card button, .game-detail-play { margin-top:auto; min-height:40px; border:0; border-radius:13px; background:linear-gradient(180deg, #a348ff, #6426cd); color:#fff; text-decoration:none; display:grid; place-items:center; font-weight:1000; text-transform:uppercase; box-shadow:0 0 22px rgba(151,89,255,.24); }
.game-card button:hover, .game-detail-play:hover { transform:translateY(-1px); box-shadow:0 0 30px rgba(151,89,255,.44); }
.game-detail-shell { max-height:88vh; overflow:auto; }
.game-detail-body { display:grid; grid-template-columns:minmax(260px, 420px) 1fr; gap:18px; align-items:start; }
.game-detail-art { min-height:290px; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.055); }
.game-detail-art img { width:100%; height:100%; min-height:290px; object-fit:cover; }
.game-detail-copy { display:grid; gap:12px; }
.game-detail-copy h3 { margin:0; font-size:30px; text-transform:uppercase; line-height:1; }
.game-detail-copy p { margin:0; color:#ddd5e9; line-height:1.5; }
.game-detail-tags { display:flex; flex-wrap:wrap; gap:8px; }
.game-detail-tags span { border:1px solid rgba(178,106,255,.35); border-radius:999px; padding:8px 10px; background:rgba(255,255,255,.055); color:#efe9ff; font-weight:900; text-transform:uppercase; font-size:12px; }
.game-detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.game-detail-actions button { min-height:44px; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(255,255,255,.06); color:#fff; font-weight:1000; text-transform:uppercase; }
.builder-copy { line-height:1.55; color:#e8e2f3; }
.builder-copy strong { color:#fff; font-size:18px; }
.builder-copy ul { margin:12px 0 0; padding-left:20px; color:#cfc7dd; }
.avatar-builder-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.builder-launch-card { border:1px solid rgba(178,106,255,.30); border-radius:18px; padding:16px; background:rgba(255,255,255,.055); }
.builder-launch-card p { margin:8px 0 0; color:#d8d0e5; }
.builder-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:14px; }
.builder-actions a { min-height:42px; border-radius:13px; display:grid; place-items:center; color:#fff; text-decoration:none; font-weight:1000; text-transform:uppercase; font-size:12px; background:linear-gradient(180deg, #a348ff, #6426cd); box-shadow:0 0 22px rgba(151,89,255,.24); }
.avatar-move-library { display:grid; gap:8px; margin-top:12px; max-height:240px; overflow:auto; }
.avatar-move-chip { border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:9px 10px; background:rgba(4,7,18,.50); color:#efe9ff; font-size:12px; font-weight:800; }
.watch-shell, .notification-shell { width:min(980px, calc(100vw - 36px)); }
.watch-hero { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; border:1px solid rgba(75,220,255,.30); border-radius:20px; padding:18px; background:linear-gradient(135deg, rgba(75,220,255,.12), rgba(156,89,255,.18)); }
.watch-hero strong { display:block; font-size:24px; text-transform:uppercase; letter-spacing:.04em; }
.watch-hero p { margin:6px 0 0; color:#d7d0e5; line-height:1.35; }
.watch-hero span { flex:0 0 auto; border-radius:999px; padding:10px 14px; color:#04140c; background:linear-gradient(180deg, #58ffb1, #20c877); font-weight:1000; text-transform:uppercase; box-shadow:0 0 22px rgba(41,243,138,.36); }
.watch-section { margin-top:16px; }
.watch-section h3 { margin:0 0 10px; color:#ffe69a; text-transform:uppercase; letter-spacing:.06em; font-size:15px; }
.watch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.watch-card { position:relative; min-height:178px; overflow:hidden; border-radius:18px; border:1px solid rgba(178,106,255,.38); background:rgba(8,10,26,.80); display:flex; flex-direction:column; justify-content:flex-end; padding:14px; text-decoration:none; color:#fff; box-shadow:0 18px 36px rgba(0,0,0,.30); }
.watch-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; filter:saturate(1.14) brightness(.72); transform:scale(1.03); }
.watch-card::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(3,5,14,.08), rgba(3,5,14,.78)); }
.watch-card > *:not(img) { position:relative; z-index:2; }
.watch-card b { align-self:flex-start; margin:0 0 8px; color:#001408; background:linear-gradient(180deg, #58ffb1, #20c877); }
.watch-card h4 { margin:0; font-size:18px; text-transform:uppercase; line-height:1.06; }
.watch-card p { margin:7px 0 0; color:#e5dff1; font-size:12px; line-height:1.35; }
.watch-card small { margin-top:8px; color:#ffdd71; font-weight:900; text-transform:uppercase; }
.watch-card:hover { transform:translateY(-2px); border-color:rgba(211,161,255,.72); box-shadow:0 24px 48px rgba(0,0,0,.38), 0 0 26px rgba(151,89,255,.26); }
.system-notification-list { display:grid; gap:10px; }
.system-notification-card { border:1px solid rgba(178,106,255,.30); border-radius:16px; padding:14px; background:rgba(255,255,255,.055); }
.system-notification-card h3 { margin:0; color:#fff; font-size:16px; }
.system-notification-card p { margin:7px 0 0; color:#d8d0e5; line-height:1.4; }
.system-notification-card small { display:block; margin-top:9px; color:#ffda75; text-transform:uppercase; font-weight:900; }

@media (max-width: 1320px) {
  .topbar { grid-template-columns: 200px auto minmax(300px, 1fr) auto auto auto auto; }
  .topnav button { font-size:12px; padding-inline:7px; }
  .grand-plaza { grid-template-columns:310px 1fr 310px; }
  .integrated-actions { grid-template-columns:1fr; max-width:480px; }
  .action-card { min-height:108px; }
  .bottom-dock { grid-template-columns:70px 100px 100px 100px minmax(180px, 240px) 100px 100px 100px minmax(24px, 1fr) 200px; }
}
@media (max-width: 860px) {
  .game-browser-tools { grid-template-columns:1fr; }
  .game-result-count { justify-content:flex-start; }
  .game-detail-body { grid-template-columns:1fr; }
  .game-detail-actions { grid-template-columns:1fr; }
  .avatar-builder-grid { grid-template-columns:1fr; }
  .builder-actions { grid-template-columns:1fr; }
}
@media (max-height: 780px) {
  .topbar { height:54px; }
  .grand-plaza { height:calc(100vh - 144px); min-height:520px; padding-top:12px; }
  .headline-block h1 { font-size:44px; }
  .profile-stats article { min-height:64px; }
  .avatar-select-stage { min-height:310px; }
  .event-row { min-height:96px; }
  .bottom-dock { height:90px; margin-bottom:10px; }
}