:root {
  --ink:#0a1e31; --panel:#0c2741; --panel2:#102f4d; --line:rgba(255,255,255,.13);
  --sky1:#0b3153; --sky2:#17345e; --accent:#8fd8ff; --white:#f8fbff;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif;color:var(--white);background:#09233a}button,input,select{font:inherit}[hidden]{display:none!important}
body{overflow:hidden}
.landing{min-height:100vh;display:grid;grid-template-columns:minmax(360px,1fr) minmax(340px,460px);align-items:center;gap:80px;padding:7vh max(5vw,32px);background:radial-gradient(circle at 16% 25%,rgba(64,185,216,.35),transparent 32%),radial-gradient(circle at 78% 75%,rgba(132,95,220,.28),transparent 31%),linear-gradient(135deg,#0b3153,#102a4b 52%,#1a284b);position:relative;overflow:hidden}
.landing:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 92%);pointer-events:none}.brand-panel,.join-card{position:relative;z-index:1}.brand-panel{justify-self:end;max-width:620px}.cat-logo{width:62px;height:48px;position:relative;margin-left:115px;margin-bottom:20px}.cat-logo:before,.cat-logo:after{content:"";position:absolute;width:27px;height:30px;background:#a9e3ff;top:0;border-radius:4px 14px 2px 14px;transform:rotate(-22deg)}.cat-logo:after{right:0;transform:rotate(22deg) scaleX(-1)}.cat-logo span{position:absolute;left:5px;right:5px;bottom:0;height:34px;background:#a9e3ff;border-radius:50% 50% 40% 40%;z-index:2}.cat-logo span:after{content:"";position:absolute;inset:11px 6px 0;background:#12304d;border-radius:50% 50% 35% 35%}
.eyebrow{font-size:12px;letter-spacing:.26em;color:#8fddff;font-weight:800;margin:0 0 12px 112px}.brand-panel h1{font-size:clamp(74px,8vw,128px);line-height:.77;letter-spacing:-.065em;margin:0;text-shadow:0 6px 30px rgba(0,0,0,.22)}.tagline{font-size:21px;color:#c8e1f2;margin:28px 0 0}.feature-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.feature-strip span{font-size:12px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:rgba(7,25,43,.32);color:#cfe9f8}
.join-card{width:100%;background:rgba(6,25,44,.85);border:1px solid var(--line);border-radius:25px;padding:24px;box-shadow:0 20px 70px rgba(1,12,27,.32);backdrop-filter:blur(12px)}.preview-wrap{height:185px;border-radius:18px;background:linear-gradient(180deg,rgba(72,161,204,.18),rgba(34,77,114,.05));border:1px solid rgba(255,255,255,.07);display:grid;place-items:center;margin-bottom:18px;overflow:hidden}.join-card>label,.join-card legend{display:block;font-weight:750;font-size:13px;margin-bottom:8px}.join-card input,.join-card select{width:100%;background:#1a354f;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 14px;outline:none}.join-card input:focus,.join-card select:focus{border-color:#91ddff;box-shadow:0 0 0 3px rgba(126,214,255,.14)}.join-card fieldset{border:0;padding:0;margin:18px 0}.swatches{display:flex;gap:8px;flex-wrap:wrap}.swatch{width:31px;height:31px;border:2px solid rgba(255,255,255,.38);border-radius:50%;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.swatch.selected{outline:2px solid white;outline-offset:3px}.compact-customiser{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}.compact-customiser label{font-size:11px;color:#b8d0e2;font-weight:700}.compact-customiser select{margin-top:5px;padding:9px 10px;font-size:12px}.join-card>button{width:100%;border:0;border-radius:13px;margin-top:15px;padding:13px 16px;background:linear-gradient(#8bd5f8,#6db5db);color:#0a2940;font-weight:850;cursor:pointer;box-shadow:0 10px 24px rgba(69,165,211,.22)}.join-card>button:disabled{opacity:.75;cursor:wait}.small-note{text-align:center;font-size:11px;color:#9eb9ce;margin:12px 0 0}.join-error{min-height:18px;color:#ffb8bd;font-size:12px;margin:10px 0 -4px}
.world{height:100vh;background:#78c9ec;position:relative;overflow:hidden}.topbar{height:58px;position:absolute;z-index:100;top:16px;left:18px;right:18px;border:1px solid rgba(255,255,255,.25);background:rgba(5,29,47,.83);backdrop-filter:blur(12px);border-radius:17px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:0 9px 35px rgba(0,20,40,.18)}.island-mark{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#82d4f7;color:#0d344e;margin-right:8px}.topbar-right{display:flex;align-items:center;gap:12px;color:#bcd7e8;font-size:12px}.milestone-pill{padding:5px 8px;border-radius:999px;background:rgba(132,213,247,.16);border:1px solid rgba(132,213,247,.25);color:#aee4fb}.stage{position:absolute;inset:0;overflow:hidden;outline:none;background:linear-gradient(#72c3e6 0 42%,#59b7d9 42% 54%,#39a8cf 54%)}.stage:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 75%,rgba(4,56,78,.15));pointer-events:none}.sky-cloud{position:absolute;width:180px;height:40px;background:rgba(255,255,255,.58);border-radius:999px;filter:blur(.2px)}.sky-cloud:before,.sky-cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.sky-cloud:before{width:66px;height:66px;left:28px;bottom:6px}.sky-cloud:after{width:88px;height:88px;right:25px;bottom:1px}.cloud-a{left:8%;top:18%;transform:scale(.8)}.cloud-b{right:8%;top:26%;transform:scale(.58);opacity:.7}.sea{position:absolute;left:0;right:0;top:42%;bottom:0;background:repeating-radial-gradient(ellipse at 50% 0,rgba(255,255,255,.13) 0 2px,transparent 3px 28px),linear-gradient(#47abd0,#208eb8)}.island-ground{position:absolute;left:-3%;right:-3%;top:50%;height:58%;border-radius:52% 48% 0 0/19% 18% 0 0;background:radial-gradient(circle at 50% 0,#ffe29f 0 22%,transparent 23%),linear-gradient(#76be62,#5cae58 55%,#55a550);border-top:15px solid #f0d48f;box-shadow:0 -7px 0 rgba(255,255,255,.16)}
.building{position:absolute;z-index:2;top:42%;width:240px;height:190px;border-radius:19px 19px 8px 8px;background:#f1d7c0;border:6px solid #ffffff66;box-shadow:0 18px 0 rgba(40,95,78,.16),0 18px 40px rgba(25,70,77,.2);color:#3f5364;text-align:center;font-weight:900;letter-spacing:.08em;padding-top:72px}.building small{display:block;letter-spacing:0;font-weight:700;margin-top:10px;color:#6c7f8c}.building:before{content:"";position:absolute;left:82px;bottom:0;width:75px;height:92px;background:#36566b;border:7px solid #fff9;border-bottom:0;border-radius:45px 45px 0 0}.building .awning{position:absolute;left:-12px;right:-12px;top:35px;height:27px;background:repeating-linear-gradient(90deg,#e97e89 0 28px,#f8e0ca 28px 56px);border-radius:7px 7px 13px 13px;box-shadow:0 5px 0 rgba(0,0,0,.08)}.building-tailor{left:9%}.building-cafe{right:9%;background:#d8efd9}.building-cafe .awning{background:repeating-linear-gradient(90deg,#6cc1b2 0 28px,#f8e6c9 28px 56px)}.notice-board{position:absolute;z-index:3;left:50%;top:51%;transform:translateX(-50%);width:190px;height:92px;border-radius:9px;background:#a66d3e;border:7px solid #72482a;box-shadow:0 13px 0 rgba(30,84,56,.16);text-align:center;padding-top:16px;color:#ffe6b8}.notice-board:before,.notice-board:after{content:"";position:absolute;top:75px;width:10px;height:50px;background:#74472c}.notice-board:before{left:25px}.notice-board:after{right:25px}.notice-board span{display:block;font-size:11px;margin-top:8px;font-weight:700}.palm{position:absolute;z-index:2;top:46%;width:110px;height:180px}.palm:before{content:"";position:absolute;width:18px;height:130px;background:linear-gradient(90deg,#9a6036,#c58a4f,#88502f);left:46px;top:45px;transform:rotate(5deg);border-radius:50%}.palm i{position:absolute;width:75px;height:25px;background:#2f9b63;border-radius:100% 0 100% 0;left:50px;top:40px;transform-origin:left center}.palm i:nth-child(1){transform:rotate(-20deg)}.palm i:nth-child(2){transform:rotate(38deg)}.palm i:nth-child(3){transform:rotate(100deg)}.palm i:nth-child(4){transform:rotate(155deg)}.palm-a{left:29%}.palm-b{right:28%;transform:scale(.82)}.dock{position:absolute;z-index:1;right:0;bottom:10%;width:250px;height:80px;background:repeating-linear-gradient(90deg,#9a6338 0 27px,#b37642 28px 52px);transform:skewY(-5deg);box-shadow:0 12px 0 #65412d}
.players{position:absolute;inset:0;z-index:10}.player{position:absolute;width:100px;height:162px;transform:translate(-50%,-88%);transition:left .48s cubic-bezier(.22,.8,.35,1),top .48s cubic-bezier(.22,.8,.35,1);pointer-events:none;filter:drop-shadow(0 10px 6px rgba(22,65,68,.25))}.player.walking .avatar-stage{animation:walkBob .42s ease-in-out infinite alternate}.player[data-facing="left"] .avatar-stage{transform:scaleX(-1)}.player-name{position:absolute;left:50%;top:143px;transform:translateX(-50%);white-space:nowrap;color:#16354a;background:rgba(255,255,255,.9);padding:4px 8px;border-radius:999px;font-size:11px;font-weight:850;box-shadow:0 4px 11px rgba(0,36,49,.17)}.avatar-stage{position:absolute;width:100px;height:142px;left:0;top:0;transform-origin:50% 88%}.avatar--preview{width:105px;height:150px;filter:drop-shadow(0 14px 12px rgba(0,20,44,.25));animation:previewFloat 2.4s ease-in-out infinite}.avatar svg{width:100%;height:100%;overflow:visible}.avatar .arm-left,.avatar .arm-right,.avatar .leg-left,.avatar .leg-right,.avatar .tail-group{transform-box:fill-box;transform-origin:50% 10%}.player.walking .arm-left{animation:limbA .42s ease-in-out infinite alternate}.player.walking .arm-right{animation:limbB .42s ease-in-out infinite alternate}.player.walking .leg-left{animation:limbB .42s ease-in-out infinite alternate}.player.walking .leg-right{animation:limbA .42s ease-in-out infinite alternate}.avatar .tail-group{animation:tailSway 1.7s ease-in-out infinite alternate}.avatar .ear-inner{opacity:.68}.avatar .marking{fill:rgba(255,255,255,.28)}.avatar[data-markings="none"] .marking{display:none}.avatar[data-markings="brow"] .marking:not(.brow){display:none}.avatar[data-markings="muzzle"] .marking:not(.muzzle-mark){display:none}.avatar[data-markings="socks"] .marking:not(.sock-mark){display:none}.avatar[data-markings="tabby"] .marking:not(.tabby-mark){display:none}.avatar[data-tail="short"] .tail-long,.avatar[data-tail="short"] .tail-fluffy{display:none}.avatar[data-tail="classic"] .tail-short,.avatar[data-tail="classic"] .tail-fluffy{display:none}.avatar[data-tail="fluffy"] .tail-short,.avatar[data-tail="fluffy"] .tail-long{display:none}.avatar[data-ears="round"] .ear-classic,.avatar[data-ears="round"] .ear-tall{display:none}.avatar[data-ears="classic"] .ear-round,.avatar[data-ears="classic"] .ear-tall{display:none}.avatar[data-ears="tall"] .ear-round,.avatar[data-ears="tall"] .ear-classic{display:none}
.move-marker{position:absolute;z-index:9;width:24px;height:12px;border:2px solid rgba(255,255,255,.88);border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:.16s}.move-marker.show{animation:marker .55s ease-out}.chat-panel{position:absolute;z-index:110;left:18px;bottom:18px;width:min(360px,calc(100vw - 36px));border:1px solid rgba(255,255,255,.24);border-radius:18px;background:rgba(6,32,47,.86);backdrop-filter:blur(12px);overflow:hidden;box-shadow:0 12px 35px rgba(0,25,40,.22)}.chat-head{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.1);font-size:12px}.chat-head button{width:28px;height:28px;border:0;border-radius:8px;background:#234b65;color:#fff}.chat-log{height:120px;overflow:auto;padding:8px 11px;font-size:12px;color:#ddf2fa}.chat-line{margin:4px 0}.chat-line.system{color:#9fd5e7;font-style:italic}.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid rgba(255,255,255,.09)}.chat-form input{flex:1;min-width:0;background:#173c54;border:1px solid #ffffff1f;border-radius:10px;color:#fff;padding:8px 10px}.chat-form button{border:0;border-radius:9px;background:#72c8ec;color:#0d3448;font-weight:800;padding:0 11px}.chat-panel.collapsed .chat-log,.chat-panel.collapsed .chat-form{display:none}.world-hint{position:absolute;z-index:20;bottom:20px;left:50%;transform:translateX(-50%);font-size:11px;color:#18435a;background:rgba(255,255,255,.74);padding:6px 10px;border-radius:999px;pointer-events:none}
@keyframes previewFloat{to{transform:translateY(-7px)}}@keyframes walkBob{to{transform:translateY(-4px)}}@keyframes limbA{from{transform:rotate(8deg)}to{transform:rotate(-13deg)}}@keyframes limbB{from{transform:rotate(-11deg)}to{transform:rotate(10deg)}}@keyframes tailSway{from{transform:rotate(-5deg)}to{transform:rotate(7deg)}}@keyframes marker{0%{opacity:1;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
@media(max-width:900px){.landing{grid-template-columns:1fr;gap:26px;overflow:auto;padding:70px 24px}.brand-panel{justify-self:center;text-align:center}.cat-logo{margin:0 auto 15px}.eyebrow{margin-left:0}.brand-panel h1{font-size:78px}.tagline{font-size:17px}.feature-strip{justify-content:center}.join-card{max-width:460px;justify-self:center}.building{transform:scale(.75)}.building-tailor{left:1%}.building-cafe{right:1%}.palm-a{left:26%}.palm-b{right:22%}}