:root { --fg: #f3f4fb; --dim: #a6abc2; --pink: #ff3d7f; --cyan: #3de2ff; --yellow: #ffd23d; --green: #39ff88; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: #07080d; color: var(--fg); font: 600 15px/1.5 system-ui, 'Segoe UI', sans-serif; }
#bg { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
body::after { content: ''; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(7,8,13,.15), rgba(7,8,13,.55) 70%, rgba(7,8,13,.85)); pointer-events: none; }
.hero { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 16px; transition: opacity .3s, transform .3s; }
.hero.away { opacity: 0; transform: translateY(-20px); pointer-events: none; }
.kicker { margin: 0 0 8px; font: 900 15px 'Arial Black', Impact, system-ui; letter-spacing: .3em; color: var(--cyan); }
.hero h1 { margin: 0; font: 900 clamp(34px, 7vw, 86px)/0.98 'Arial Black', Impact, system-ui; letter-spacing: .01em; text-shadow: 0 6px 40px rgba(0,0,0,.6), 0 0 34px rgba(255,61,127,.35); }
.sub { margin: 16px 0 26px; font-size: clamp(17px, 2.4vw, 22px); color: #e6e7f2; }
.play { font: 900 24px 'Arial Black', Impact, system-ui; letter-spacing: .08em; padding: 18px 52px; border-radius: 18px; border: 0; background: var(--pink); color: #fff; cursor: pointer; box-shadow: 0 10px 40px rgba(255,61,127,.5); transition: transform .12s; }
.play:hover { transform: translateY(-2px) scale(1.02); }
.live { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; color: var(--dim); font-size: 14px; }
.live b { color: var(--fg); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; box-shadow: 0 0 10px var(--green); }

.browser { position: fixed; inset: 0; z-index: 2; overflow-y: auto; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; background: rgba(7,8,13,.55); backdrop-filter: blur(4px); }
.browser header { width: min(1080px, 100%); display: flex; align-items: center; justify-content: space-between; }
.browser h2 { margin: 0; font: 900 30px 'Arial Black', Impact, system-ui; letter-spacing: .03em; }
.x { background: rgba(255,255,255,.08); border: 0; color: var(--fg); width: 40px; height: 40px; border-radius: 12px; cursor: pointer; font-size: 18px; }
.me { width: min(1080px, 100%); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: rgba(13,15,25,.85); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 12px 14px; }
.me label { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.me input, .me select { font: 600 15px system-ui; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: #0b0d16; color: var(--fg); }
.swatches { display: flex; gap: 6px; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatches button.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.lobbies { width: min(1080px, 100%); display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lobby { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: linear-gradient(160deg, rgba(30,24,52,.92), rgba(12,13,22,.92)); border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.lobby.hot { border-color: var(--yellow); box-shadow: 0 0 26px rgba(255,210,61,.25); }
.lobby .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lobby h3 { margin: 0; font: 900 18px 'Arial Black', Impact, system-ui; letter-spacing: .02em; white-space: nowrap; }
.region { font-size: 12px; color: var(--cyan); border: 1px solid rgba(61,226,255,.4); padding: 2px 7px; border-radius: 999px; }
.count { font-size: 14px; color: var(--dim); }
.count b { font: 900 30px 'Arial Black', Impact, system-ui; color: var(--fg); }
.count em { font-style: normal; font-size: 12px; }
.bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--pink)); }
.meta { display: flex; justify-content: space-between; color: var(--dim); font-size: 13px; }
.lobby.hot .evs { color: var(--yellow); }
.join { margin-top: 4px; text-align: center; text-decoration: none; padding: 12px; border-radius: 12px; background: var(--pink); color: #fff; font: 900 16px 'Arial Black', Impact, system-ui; letter-spacing: .1em; }
.join.off { background: #333; pointer-events: none; }
.fine { color: var(--dim); font-size: 12.5px; text-align: center; max-width: 640px; }
@media (max-width: 560px) { .browser h2 { font-size: 24px; } .play { padding: 16px 38px; font-size: 20px; } }

/* the character creator */
.creator { position: fixed; inset: 0; z-index: 2; overflow-y: auto; padding: 28px 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; background: rgba(7,8,13,.55); backdrop-filter: blur(4px); }
.creator header { width: min(1080px, 100%); display: flex; align-items: center; justify-content: space-between; }
.creator h2 { margin: 0; font: 900 30px 'Arial Black', Impact, system-ui; letter-spacing: .03em; }
.cr-body { width: min(1080px, 100%); display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 18px; }
.cr-preview { position: relative; background: radial-gradient(circle at 50% 35%, rgba(255,61,127,.22), rgba(13,15,25,.92) 70%); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 10px; display: flex; flex-direction: column; align-items: center; }
#pv { width: 100%; aspect-ratio: 3 / 4; display: block; cursor: grab; touch-action: none; }
.cr-emotes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding-bottom: 6px; }
.cr-emotes button, .ghost { font: 700 13px system-ui; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--fg); cursor: pointer; }
.cr-emotes button:hover, .ghost:hover { background: rgba(255,255,255,.14); }
.cr-opts { background: rgba(13,15,25,.85); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.cr-name { display: flex; align-items: center; gap: 10px; color: var(--dim); }
.cr-name input { flex: 1; font: 600 16px system-ui; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: #0b0d16; color: var(--fg); }
.cr-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cr-row > span { width: 92px; color: var(--dim); font-size: 13px; }
.cr-row .swatches { flex-wrap: wrap; }
.swatches button { width: 30px; height: 30px; }
#customColor { width: 34px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { font: 700 13px system-ui; padding: 7px 11px; border-radius: 99px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: var(--fg); cursor: pointer; }
.chips button.on { background: var(--pink); border-color: var(--pink); }
.cr-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 6px; flex-wrap: wrap; }
.play.small { font-size: 18px; padding: 14px 28px; border-radius: 14px; }
.me { justify-content: space-between; }
.me b { color: var(--fg); }
@media (max-width: 760px) { .cr-body { grid-template-columns: 1fr; } .cr-preview { max-width: 360px; justify-self: center; width: 100%; } .cr-row > span { width: 100%; } }