@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { color-scheme: dark; --ink:#10182b; --panel:#17223b; --line:#2d3d5c; --cyan:#45e8cf; --pink:#ff5f91; --cream:#fff8df; }
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; }
body { font-family:'Space Grotesk',sans-serif; color:var(--cream); background:radial-gradient(circle at 15% 10%,#293a63 0,transparent 27%),radial-gradient(circle at 85% 80%,#402550 0,transparent 28%),#0c1324; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
button,input { font:inherit; }
button { color:inherit; }
.app-shell { min-height:100vh; padding:18px 22px 100px; }
.topbar { height:68px; max-width:1500px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px; }
.brand-mark { width:43px; height:43px; display:grid; place-items:center; background:var(--pink); color:#15203a; font-weight:900; font-size:13px; box-shadow:5px 5px 0 #060b16; clip-path:polygon(0 0,100% 0,100% 78%,78% 78%,78% 100%,58% 78%,0 78%); }
.brand b { font-size:16px; letter-spacing:.08em; display:block; line-height:1; }
.brand small { font:10px 'DM Mono'; color:#98abc7; letter-spacing:.18em; }
.room-pill { display:flex; align-items:center; gap:9px; font:11px 'DM Mono'; border:1px solid var(--line); border-radius:99px; padding:9px 14px; color:#b9c7dc; background:#111b30cc; }
.room-pill i { width:7px; height:7px; border-radius:50%; background:#f9b84b; box-shadow:0 0 10px #f9b84b; }
.room-pill.connected i { background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.room-pill.error i { background:#ff6a6a; box-shadow:0 0 10px #ff6a6a; }
.top-actions { display:flex; align-items:center; gap:16px; }
.online-count { font:11px 'DM Mono'; color:#9fb0ca; }
.online-count b { color:var(--cyan); }
.icon-button { width:38px;height:38px;border:1px solid var(--line);background:#17223b;border-radius:5px;cursor:pointer; }
.game-layout { width:min(1500px,100%); height:calc(100vh - 110px); min-height:580px; margin:10px auto 0; display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; }
.world-card { position:relative; min-width:0; overflow:hidden; background:#000; border:1px solid #40516d; border-radius:7px; box-shadow:0 25px 70px #0008; }
#gameCanvas { display:block; width:100%; height:100%; cursor:pointer; image-rendering:pixelated; }
.room-title { position:absolute; left:22px; top:20px; display:flex; align-items:center; gap:11px; padding:10px 14px 10px 11px; background:#0d1729dd; border:1px solid #3c4b66; box-shadow:4px 4px 0 #09101f99; }
.room-title small { display:block; color:#8fa4c5; font:8px 'DM Mono'; letter-spacing:.14em; }.room-title strong{font-size:15px;letter-spacing:.08em}.live-dot{width:9px;height:9px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink)}
.hint { position:absolute; left:50%; bottom:19px; transform:translateX(-50%); padding:8px 12px; border-radius:4px; background:#0b1425d9; color:#b9c7d9; font:10px 'DM Mono'; white-space:nowrap; border:1px solid #34435f; }.hint span{color:var(--cyan)}
.toast { position:absolute; top:22px; right:22px; transform:translateY(-15px); opacity:0; transition:.22s; padding:10px 13px; background:#101a2d; border-left:3px solid var(--pink); font:11px 'DM Mono'; }.toast.show{transform:none;opacity:1}
.social-panel { min-width:0; display:flex; flex-direction:column; background:#141f36; border:1px solid #344560; border-radius:7px; overflow:hidden; box-shadow:0 25px 70px #0007; }
.panel-head { display:flex; justify-content:space-between; align-items:center; padding:19px 18px 17px; border-bottom:1px solid #2a3a57; }.panel-head small{font:8px 'DM Mono';color:#778dab;letter-spacing:.16em}.panel-head h2{font-size:18px;margin:3px 0 0}.signal{display:flex;gap:3px;align-items:end}.signal i{display:block;width:3px;background:var(--cyan)}.signal i:nth-child(1){height:5px}.signal i:nth-child(2){height:9px}.signal i:nth-child(3){height:13px}
.messages { flex:1; overflow-y:auto; padding:12px 15px; scrollbar-color:#3c4d6d transparent; }
.message { display:grid; grid-template-columns:32px 1fr; gap:9px; padding:9px 4px; animation:arrive .24s ease-out; }.message+.message{border-top:1px solid #22314b}.avatar-dot{width:30px;height:30px;border:2px solid #0b1221;box-shadow:2px 2px 0 #07101d;display:grid;place-items:center;color:#10182b;font-weight:800;font-size:11px}.message-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.message-head b{font-size:12px}.message-head time{font:8px 'DM Mono';color:#647796}.message p{margin:3px 0 0;color:#c3cee0;font-size:12px;line-height:1.45;overflow-wrap:anywhere}.message.system{display:block;text-align:center;color:#7186a6;font:9px 'DM Mono';border:0;padding:7px}
.chat-form { padding:13px; border-top:1px solid #2b3a56; background:#111b30; }.chat-form>label{display:none}.input-row{display:flex;background:#0b1426;border:1px solid #354765}.input-row:focus-within{border-color:var(--cyan);box-shadow:0 0 0 2px #45e8cf22}.input-row input{width:100%;min-width:0;padding:12px;background:transparent;border:0;outline:0;color:#f8f2df;font-size:12px}.input-row button{width:43px;border:0;background:var(--cyan);color:#0b1627;cursor:pointer;font-weight:900}.chat-form>small{display:block;margin-top:7px;color:#5f7392;font:8px 'DM Mono'}
.dock { position:fixed; z-index:10; left:50%; bottom:18px; transform:translateX(-50%); display:flex; padding:5px; background:#111b30ef; border:1px solid #3b4c69; border-radius:6px; box-shadow:0 13px 34px #0009; backdrop-filter:blur(8px); }.dock button{min-width:72px;padding:7px 12px;border:0;background:transparent;color:#8194b1;font:9px 'DM Mono';cursor:pointer}.dock button span{display:block;color:#dce5f2;font:18px 'Space Grotesk';line-height:1.1}.dock button.active,.dock button:hover{color:var(--cyan);background:#1b2a46}
.modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 50% 30%,#29385dcc,#080e1aed 70%); backdrop-filter:blur(8px); transition:.35s; }.modal.hidden{opacity:0;visibility:hidden;pointer-events:none}.join-card{width:min(430px,100%);padding:32px;background:#152139;border:1px solid #50617e;box-shadow:10px 10px 0 #070d18;text-align:center;position:relative}.join-card::before{content:"";position:absolute;inset:7px;border:1px solid #273855;pointer-events:none}.eyebrow{font:9px 'DM Mono';color:#8fa4c3;letter-spacing:.3em;margin:8px}.join-card h1{font-size:50px;line-height:.78;letter-spacing:-.07em;margin:14px 0 18px;color:#fff8df;text-shadow:4px 4px 0 #090f1c}.join-card h1 em{font-style:normal;color:var(--pink)}.join-card>p:not(.eyebrow){font-size:13px;line-height:1.5;color:#9fb0c9;max-width:310px;margin:0 auto 23px}.join-card form{text-align:left;position:relative}.join-card label,.join-card legend{display:block;font:9px 'DM Mono';letter-spacing:.12em;color:#8fa4c3;margin-bottom:7px}.join-card input{width:100%;background:#0b1425;border:1px solid #40516d;color:white;padding:13px;outline:0}.join-card input:focus{border-color:var(--cyan)}fieldset{border:0;padding:0;margin:17px 0}.color-picker{display:flex;gap:9px}.swatch{width:31px;height:31px;border:2px solid #0c1425;box-shadow:0 0 0 1px #41506a;cursor:pointer}.swatch.selected{box-shadow:0 0 0 2px var(--cream);transform:translateY(-2px)}.enter-button{width:100%;border:0;padding:14px;background:var(--cyan);color:#0c1829;font-size:12px;font-weight:800;letter-spacing:.07em;cursor:pointer;box-shadow:4px 4px 0 #07101f}.enter-button span{float:right}.privacy-note{display:block;color:#607391;font:8px 'DM Mono';line-height:1.4;margin-top:18px}.mini-scene{height:56px;margin-top:-56px}.pixel-person{display:inline-block;width:28px;height:41px;background:linear-gradient(#ffc8a4 0 28%,#ff5f91 29% 63%,#242f4b 64%);border:3px solid #0b1323;box-shadow:5px 5px 0 #080d18;position:relative}.pixel-person::before{content:"";position:absolute;width:36px;height:13px;left:-7px;top:-7px;background:#4be1c8;border:3px solid #0b1323}
.radio-control{position:absolute;z-index:4;right:22px;bottom:20px;height:48px;display:flex;align-items:center;gap:9px;padding-left:12px;border:1px solid #526481;background:#0b1426e8;border-radius:4px;box-shadow:4px 4px 0 #050a13aa,inset 0 0 18px #0b1022;backdrop-filter:blur(6px)}.radio-copy{min-width:116px;line-height:1}.radio-copy small{display:block;margin-bottom:4px;color:#7186a6;font:7px 'DM Mono';letter-spacing:.18em}.radio-copy b{display:inline-block;color:#d8e4f4;font:8px 'DM Mono';letter-spacing:.05em;white-space:nowrap}.radio-copy a{margin-left:7px;color:#ff5f91;font:7px 'DM Mono';text-decoration:none}.radio-control.playing{border-color:#45e8cf88;box-shadow:4px 4px 0 #050a13aa,inset 0 0 18px #45e8cf10,0 0 15px #45e8cf22}.radio-control.playing .radio-copy b{color:var(--cyan)}.radio-control .icon-button{width:46px;height:46px;border:0;border-left:1px solid var(--line);background:#17223b;border-radius:0 3px 3px 0;color:var(--cyan);font-size:13px;transition:.18s}.radio-control .icon-button:hover{background:#20314f}.radio-control .icon-button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@keyframes arrive{from{opacity:0;transform:translateY(5px)}}
@media(max-width:820px){.app-shell{padding:10px 10px 90px}.topbar{height:55px}.brand small,.online-count{display:none}.game-layout{height:auto;min-height:0;display:block;margin-top:8px}.world-card{height:62vh;min-height:420px}.social-panel{height:330px;margin-top:10px}.room-pill{margin-left:auto}.dock{bottom:8px}.dock button{min-width:64px;padding-inline:8px}.hint{bottom:12px}.room-title{top:12px;left:12px}.top-actions{gap:5px}}
@media(max-width:480px){.brand b{font-size:13px}.room-pill{font-size:9px;padding:7px 9px}.game-layout{margin-top:5px}.world-card{height:58vh;min-height:380px}.join-card{padding:26px 22px}.join-card h1{font-size:44px}.radio-copy{display:none}.radio-control{right:12px;bottom:12px;padding-left:0}}