*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#0a0a1a;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:#fff;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}#app{width:100vw;height:100vh;height:100dvh;position:relative}#gameCanvas{width:100%;height:100%;display:block;touch-action:none}#joystickZone{display:none;position:fixed;bottom:0;left:0;width:50%;height:45%;z-index:5;touch-action:none}:root{--ink: #16251f;--cream: #fff5de;--cream-2: #ffe9bd;--leaf: #5f8f49;--moss: #355f37;--river: #5db4cc;--river-dark: #256c80;--bark: #8d5b36;--panel: rgba(255, 248, 229, .86)}#login{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 18% 18%,rgba(255,214,123,.5),transparent 24%),radial-gradient(circle at 86% 12%,rgba(123,211,188,.45),transparent 28%),linear-gradient(145deg,#f4dca7,#a5d9b5 42%,#69b4c7);display:flex;align-items:center;justify-content:center;z-index:100;transition:opacity .6s ease,visibility .6s;overflow:hidden;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom))}#login:before,#login:after{content:"";position:absolute;pointer-events:none}#login:before{inset:auto -8% -24% -8%;height:48%;background:radial-gradient(ellipse at 16% 64%,rgba(48,98,49,.36) 0 34%,transparent 35%),radial-gradient(ellipse at 68% 42%,rgba(70,126,67,.34) 0 36%,transparent 37%),linear-gradient(180deg,#2d724138,#1f584a7a);filter:blur(1px)}#login:after{top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.16),transparent 70%);mask-image:linear-gradient(180deg,rgba(0,0,0,.16),transparent 70%)}#login.hidden{opacity:0;visibility:hidden;pointer-events:none}.login-shell{width:min(1040px,100%);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,420px);gap:22px;align-items:stretch;position:relative;z-index:1}.login-intro,.login-card{border:1px solid rgba(255,255,255,.55);box-shadow:0 30px 90px #20403438,inset 0 1px #ffffffbf;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.login-intro{min-height:560px;border-radius:36px;padding:46px;background:linear-gradient(160deg,#fff7dee0,#dcf5e3b8);color:var(--ink);position:relative;overflow:hidden}.eyebrow{display:inline-flex;align-items:center;width:fit-content;padding:8px 12px;border-radius:999px;background:#2463491a;color:#315b42;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px}.login-intro h1{font-size:clamp(54px,8vw,112px);line-height:.88;letter-spacing:-.08em;max-width:680px;color:#1c3428;text-shadow:0 2px 0 rgba(255,255,255,.55)}.intro-copy{max-width:520px;margin-top:24px;color:#16251fb8;font-size:clamp(18px,2vw,24px);line-height:1.35;font-weight:650}.feature-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.feature-row span{display:inline-flex;align-items:center;min-height:38px;padding:8px 12px;border-radius:999px;background:#ffffff94;border:1px solid rgba(31,80,61,.1);color:#16251fb8;font-size:13px;font-weight:800;box-shadow:0 8px 22px #315b4214}.village-preview{position:absolute;left:42px;right:42px;bottom:34px;height:210px;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#92d6e2,#c9efcf 54%,#89c56f 55%,#61a94f);border:1px solid rgba(255,255,255,.65);box-shadow:inset 0 -24px 42px #285b302e,0 18px 44px #315b4229}.village-preview span{position:absolute;display:block}.preview-sun{width:64px;height:64px;right:54px;top:32px;border-radius:50%;background:#ffd86f;box-shadow:0 0 42px #ffd86fcc}.preview-cloud{width:86px;height:28px;border-radius:999px;background:#ffffffbf}.preview-cloud:before,.preview-cloud:after{content:"";position:absolute;bottom:8px;width:38px;height:38px;border-radius:50%;background:#ffffffc7}.preview-cloud:before{left:14px}.preview-cloud:after{right:12px;width:30px;height:30px}.cloud-one{left:54px;top:42px}.cloud-two{left:210px;top:76px;transform:scale(.74);opacity:.72}.preview-hill{left:-6%;right:-6%;bottom:52px;height:120px;border-radius:50% 50% 0 0}.hill-back{background:#78bd68;transform:translate(-18%) scaleX(.7);opacity:.84}.hill-front{background:#66aa58;bottom:18px;transform:translate(24%) scaleX(.78)}.preview-river{width:190px;height:250px;left:36%;bottom:-108px;transform:rotate(24deg);border-radius:55% 45% 0 0;background:linear-gradient(90deg,#2f8ea6db,#74cfdef2,#287996d9);box-shadow:inset 12px 0 #ffffff24}.preview-house{left:18%;bottom:48px;width:78px;height:58px;border-radius:16px 16px 10px 10px;background:#f5c47d;color:#7a3f29;display:grid!important;place-items:center;font-size:58px;line-height:1;box-shadow:0 14px 22px #47522b33}.preview-tree{color:#245e32;font-size:72px;text-shadow:0 12px 18px rgba(42,68,35,.18)}.tree-one{right:22%;bottom:46px}.tree-two{right:12%;bottom:30px;transform:scale(.8)}.preview-otter{left:50%;bottom:54px;font-size:42px;transform:rotate(-8deg);filter:drop-shadow(0 10px 12px rgba(47,64,41,.25))}.login-card{align-self:center;border-radius:34px;padding:28px;background:var(--panel);color:var(--ink)}.card-icon{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;margin-bottom:18px;font-size:34px;background:linear-gradient(145deg,#fff6dd,#d9f2df);border:1px solid rgba(49,91,66,.12);box-shadow:0 12px 30px #315b421f}.login-card h2{font-size:34px;line-height:1;letter-spacing:-.045em;color:#1d3328;margin-bottom:10px}.login-card>p{color:#16251f99;margin-bottom:24px;font-size:15px;line-height:1.45;font-weight:600}.field-label,.animal-select .label{display:block;margin-bottom:10px;color:#16251f94;font-size:12px;text-transform:uppercase;letter-spacing:.11em;font-weight:850}.login-card input{width:100%;padding:15px 16px;border-radius:18px;border:1px solid rgba(38,86,65,.18);background:#ffffffa6;color:var(--ink);font-size:16px;outline:none;margin-bottom:22px;transition:all .2s ease;font-weight:700;box-shadow:inset 0 1px #ffffffb3}.login-card input:focus{border-color:#256c80b3;background:#ffffffeb;box-shadow:0 0 0 4px #5db4cc2e}.login-card input::placeholder{color:#16251f52;font-weight:650}.animal-select{margin-bottom:24px}.animal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.animal-option{padding:11px 8px 10px;border-radius:18px;border:1px solid rgba(38,86,65,.08);background:#ffffff75;cursor:pointer;font-size:29px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:76px;min-width:44px;box-shadow:0 8px 18px #315b4212}.animal-option span{font-size:10px;color:#16251f7a;text-transform:capitalize;letter-spacing:.04em;font-weight:850}.animal-option:hover{background:#ffffffc2;transform:translateY(-2px);box-shadow:0 14px 26px #315b4221}.animal-option.selected{border-color:#256c80b8;background:linear-gradient(180deg,#e8fbf7f5,#d1f0e7d1);box-shadow:0 0 0 4px #5db4cc2e,0 14px 28px #315b4226}#joinBtn{width:100%;padding:16px 18px;border-radius:18px;border:none;background:linear-gradient(135deg,#245c45,#277e86);color:#fff8e7;font-size:16px;font-weight:850;cursor:pointer;transition:all .22s ease;letter-spacing:.01em;min-height:54px;box-shadow:0 18px 34px #277e863d;display:flex;align-items:center;justify-content:center;gap:10px}#joinBtn span{font-size:18px;transition:transform .2s ease}#joinBtn:hover{transform:translateY(-2px);box-shadow:0 22px 42px #277e864d}#joinBtn:hover span{transform:translate(3px)}#joinBtn:active{transform:translateY(0)}@media(max-width:820px){#login{align-items:flex-start;overflow-y:auto;touch-action:pan-y}.login-shell{grid-template-columns:1fr;gap:14px}.login-intro{min-height:340px;padding:28px;border-radius:28px}.login-intro h1{font-size:clamp(48px,16vw,78px)}.intro-copy{font-size:17px;margin-top:16px}.feature-row{margin-top:18px}.village-preview{left:24px;right:24px;bottom:22px;height:118px;border-radius:22px}.preview-sun{width:42px;height:42px;right:28px;top:18px}.preview-house{transform:scale(.62);transform-origin:bottom left;left:10%;bottom:20px}.preview-tree{font-size:48px}.tree-one{right:20%;bottom:18px}.tree-two{right:8%;bottom:14px}.preview-otter{font-size:30px;bottom:28px}.preview-river{width:110px;height:168px;bottom:-76px}.cloud-two{display:none!important}.login-card{padding:22px;border-radius:28px}.card-icon{display:none}.login-card h2{font-size:28px}}@media(max-width:430px){#login{padding:12px}.login-intro{min-height:296px;padding:22px}.feature-row span{font-size:12px;min-height:34px;padding:6px 10px}.animal-grid{gap:8px}.animal-option{min-height:68px;border-radius:16px;font-size:25px}.animal-option span{font-size:9px}}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}#hud.hidden{display:none}#hud>*{pointer-events:auto}#topBar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 100%);gap:8px}#playerCount,#clock{background:#00000073;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.3px;border:1px solid rgba(255,255,255,.06);white-space:nowrap;flex-shrink:0}#gameTitle{font-size:14px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:.5px;display:none}#chatBox{position:absolute;bottom:74px;left:10px;width:240px;max-width:60%;max-height:200px;display:flex;flex-direction:column}#chatMessages{flex:1;overflow-y:auto;padding:4px;display:flex;flex-direction:column;gap:3px;max-height:150px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.chat-msg{background:#00000080;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:5px 10px;border-radius:10px;font-size:12px;line-height:1.4;animation:msgIn .25s ease;border:1px solid rgba(255,255,255,.04)}.chat-msg .name{font-weight:700;margin-right:4px}.chat-msg .system{color:#fff6;font-style:italic;font-size:11px}@keyframes msgIn{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}#chatInput{width:100%;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:#0000008c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:14px;outline:none;transition:all .25s ease;min-height:44px}#chatInput:focus{border-color:#4ecdc480;box-shadow:0 0 0 3px #4ecdc414}#chatInput::placeholder{color:#ffffff40}#emoteBar{position:absolute;bottom:12px;left:50%;transform:translate(-50%);display:flex;gap:6px;background:#00000080;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:6px 10px;border-radius:20px;border:1px solid rgba(255,255,255,.06)}.emote-btn{width:44px;height:44px;border:none;border-radius:12px;background:#ffffff0f;cursor:pointer;font-size:20px;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.emote-btn:hover{background:#ffffff26;transform:scale(1.15) translateY(-2px)}.emote-btn:active{transform:scale(.95)}#playerList{position:absolute;top:52px;right:10px;width:160px;background:#00000080;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.06)}#playerListToggle{width:100%;background:none;border:none;color:#fff9;cursor:pointer}#playerListArrow{font-size:10px;transition:transform .2s}#playerList.open #playerListArrow{transform:rotate(180deg)}.player-list-header{padding:10px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#ffffff80;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;min-height:44px}.player-list-body{display:none;max-height:200px;overflow-y:auto}#playerList.open .player-list-body{display:block}.player-item{padding:8px 14px;font-size:13px;display:flex;align-items:center;gap:8px;transition:background .15s}.player-item:hover{background:#ffffff08}.player-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}.player-item.you{color:#4ecdc4;font-weight:600}#controls{display:none}#loadingOverlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a1ae6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;transition:opacity .5s,visibility .5s}#loadingOverlay.hidden{opacity:0;visibility:hidden}.loading-spinner{width:48px;height:48px;border:3px solid rgba(78,205,196,.15);border-top-color:#4ecdc4;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}#loadingOverlay p{color:#ffffff80;font-size:15px;font-weight:500}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ffffff40}@media(orientation:landscape){.login-card{max-width:440px;padding:40px 48px}.login-card h1{font-size:52px}#gameTitle{display:block}#chatBox{width:320px;max-width:320px;max-height:260px}#chatMessages{max-height:200px}#playerList{width:190px;top:56px}#controls{display:block;position:absolute;bottom:16px;right:16px;background:#00000059;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 14px;border-radius:10px;font-size:11px;color:#ffffff4d;border:1px solid rgba(255,255,255,.04);letter-spacing:.2px}}@media(min-width:768px){.login-card{max-width:440px;padding:48px}.login-card h1{font-size:52px}#chatBox{width:340px;max-width:340px}#playerList{width:190px}#gameTitle{display:block}#controls{display:block;position:absolute;bottom:16px;right:16px;background:#00000059;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 14px;border-radius:10px;font-size:11px;color:#ffffff4d;border:1px solid rgba(255,255,255,.04);letter-spacing:.2px}}