:root{--ink:#2b1d14;--wood-900:#3d2817;--wood-700:#5c3d24;--wood-500:#8a5a34;--wood-300:#b98552;--cream-100:#fbf1d9;--cream-200:#f1dfb6;--cream-300:#e2c48e;--forest-900:#1f2e1c;--forest-700:#2f5a2e;--forest-500:#4f8a3c;--forest-300:#8dbb5a;--berry-700:#8e2f27;--berry-500:#c2453a;--grass:#6aa84f;--grass-dark:#5a9343;--px:3px;--font:"Pixelify Sans", ui-monospace, monospace}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--forest-900);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:none;font-size:16px}button,input{font:inherit;color:inherit}.px-panel{background:var(--cream-100);box-shadow:calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink), 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), inset 0 calc(var(--px) * -1) 0 0 var(--cream-300), 0 calc(var(--px) * 3) 0 0 #00000040}.px-panel--wood{background:var(--wood-500);color:var(--cream-100)}.px-title{letter-spacing:1px;color:var(--cream-100);text-shadow:2px 2px 0 var(--wood-900), -1px -1px 0 var(--wood-900), 1px -1px 0 var(--wood-900), -1px 1px 0 var(--wood-900);margin:0;font-weight:700}.px-btn{--btn-bg:var(--forest-500);--btn-shade:var(--forest-700);background:var(--btn-bg);color:var(--cream-100);cursor:pointer;box-shadow:calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink), 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), inset 0 calc(var(--px) * -1) 0 0 var(--btn-shade), inset 0 var(--px) 0 0 #ffffff40;border:none;justify-content:center;align-items:center;gap:8px;padding:8px 16px 11px;font-weight:600;display:inline-flex}.px-btn:hover:not(:disabled){filter:brightness(1.08)}.px-btn:active:not(:disabled){box-shadow:calc(var(--px) * -1) 0 0 0 var(--ink), var(--px) 0 0 0 var(--ink), 0 calc(var(--px) * -1) 0 0 var(--ink), 0 var(--px) 0 0 var(--ink), inset 0 var(--px) 0 0 var(--btn-shade);transform:translateY(2px)}.px-btn:disabled{opacity:.55;cursor:default}.px-btn:focus-visible{outline:2px dashed var(--ink);outline-offset:6px}.px-btn--danger{--btn-bg:var(--berry-500);--btn-shade:var(--berry-700)}.px-btn--wood{--btn-bg:var(--wood-500);--btn-shade:var(--wood-700)}.px-btn--icon{width:48px;height:48px;padding:8px}.px-input{background:var(--cream-200);width:100%;color:var(--ink);box-shadow:calc(var(--px) * -1) 0 0 0 var(--wood-700), var(--px) 0 0 0 var(--wood-700), 0 calc(var(--px) * -1) 0 0 var(--wood-700), 0 var(--px) 0 0 var(--wood-700), inset 0 var(--px) 0 0 var(--cream-300);border:none;padding:9px 12px}.px-input::placeholder{color:var(--wood-300)}.px-input:focus{background:var(--cream-100);outline:none}.px-separator{color:var(--wood-500);align-items:center;gap:10px;font-size:14px;display:flex}.px-separator:before,.px-separator:after{content:"";height:var(--px);background:var(--cream-300);flex:1}.error{color:var(--berry-500);text-align:center;font-size:14px}.muted{color:var(--wood-500);font-size:14px}.animal-icon{--scale:2;width:calc(32px * var(--scale));height:calc(32px * var(--scale));background-repeat:no-repeat;background-size:calc(128px * var(--scale)) calc(128px * var(--scale));image-rendering:pixelated;flex:none}.critter{width:96px;height:96px;image-rendering:pixelated;animation:critter-cross var(--duration) linear var(--delay) infinite, critter-walk .6s steps(var(--frames)) infinite;will-change:transform;background-repeat:no-repeat;position:absolute;left:0}.critter--left{animation-direction:reverse,normal}@keyframes critter-cross{0%{transform:translate(-120px)}to{transform:translate(calc(100vw + 120px))}}@keyframes critter-walk{to{background-position-x:calc(var(--frames) * -96px)}}@media (prefers-reduced-motion:reduce){.critter{animation:none;display:none}}.login{background-color:var(--grass);background-image:radial-gradient(var(--grass-dark) 2px, transparent 2px), radial-gradient(var(--grass-dark) 2px, transparent 2px);background-position:0 0,24px 24px;background-size:48px 48px;place-items:center;height:100%;padding:16px;display:grid;position:relative;overflow:hidden}.login-card{z-index:1;width:min(340px,100%);position:relative}.login-card header{text-align:center;padding:18px 20px 14px}.login-card header .px-title{font-size:34px}.login-card header p{color:var(--cream-200);margin:4px 0 0;font-size:15px}.login-card .body{flex-direction:column;align-items:stretch;gap:14px;padding:20px;display:flex}.login-card .google{justify-content:center;min-height:44px;display:flex}.login-card form{flex-direction:column;gap:12px;display:flex}.login-card .waking{text-align:center}.dev-login{gap:8px;display:flex}.dev-login .px-input{padding:6px 8px;font-size:13px}.game{height:100%;position:relative;overflow:hidden}.game-canvas{position:absolute;inset:0}.identity{align-items:center;gap:10px;padding:6px 14px 6px 6px;display:flex;position:absolute;top:16px;left:16px}.identity .name{font-size:18px;font-weight:700}.identity .species{color:var(--wood-500);font-size:14px}.online{flex-direction:column;width:220px;max-height:calc(100% - 140px);display:flex;position:absolute;top:16px;right:16px}.online header{padding:8px 12px;font-weight:600}.online ul{margin:0;padding:6px;list-style:none;overflow-y:auto}.online li{align-items:center;gap:8px;padding:2px 6px;display:flex}.online li.me .who{font-weight:700}.online .who{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.online .status{color:var(--wood-500);gap:4px;display:flex}.toolbar{align-items:center;gap:14px;padding:10px 14px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.toolbar .hint{color:var(--wood-500);padding-left:4px;font-size:14px}.bubbles{gap:14px;display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.bubble{background:var(--wood-700);width:168px;height:126px;box-shadow:calc(var(--px) * -2) 0 0 0 var(--ink), calc(var(--px) * 2) 0 0 0 var(--ink), 0 calc(var(--px) * -2) 0 0 var(--ink), 0 calc(var(--px) * 2) 0 0 var(--ink), 0 calc(var(--px) * 4) 0 0 #00000040;transition:box-shadow .15s;position:relative}.bubble.speaking{box-shadow:calc(var(--px) * -2) 0 0 0 var(--forest-300), calc(var(--px) * 2) 0 0 0 var(--forest-300), 0 calc(var(--px) * -2) 0 0 var(--forest-300), 0 calc(var(--px) * 2) 0 0 var(--forest-300), 0 calc(var(--px) * 4) 0 0 #00000040}.bubble video{object-fit:cover;width:100%;height:100%;display:block}.bubble video.mirrored{transform:scaleX(-1)}.bubble video.hidden{visibility:hidden}.bubble .avatar{background:var(--wood-500);place-items:center;display:grid;position:absolute;inset:0}.bubble .plate{align-items:center;gap:4px;padding:1px 8px 3px;font-size:14px;display:flex;position:absolute;bottom:6px;left:6px}.credits{z-index:1;text-align:center;color:var(--cream-100);text-shadow:1px 1px 0 var(--forest-900);font-size:13px;position:absolute;bottom:10px;left:0;right:0}.credits a{color:inherit}.game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.game-canvas{touch-action:none}.online-toggle{cursor:pointer;text-align:left;border:none;justify-content:space-between;align-items:center;width:100%;padding:8px 12px;display:flex}.online .chevron{font-size:14px}.joystick{left:max(24px, env(safe-area-inset-left));bottom:max(28px, env(safe-area-inset-bottom));width:136px;height:136px;box-shadow:0 0 0 var(--px) var(--ink), inset 0 0 0 6px #2b1d1426;touch-action:none;background:#fbf1d959;border-radius:50%;place-items:center;display:grid;position:absolute}.joystick-thumb{background:var(--wood-500);width:58px;height:58px;box-shadow:0 0 0 var(--px) var(--ink), inset 0 -5px 0 var(--wood-700), inset 0 4px 0 #ffffff40;pointer-events:none;border-radius:50%}@media (width<=700px){.identity{padding:4px 10px 4px 4px;top:10px;left:10px}.identity .animal-icon{--scale:1.25!important}.identity .name{font-size:15px}.identity .species{font-size:12px}.online{width:170px;top:10px;right:10px}.online-toggle{padding:6px 10px}.bubbles{justify-content:flex-start;gap:10px;padding:8px 6px;top:74px;left:10px;right:10px;overflow-x:auto;transform:none}.bubble{flex:none;width:112px;height:84px}.bubble .plate{font-size:12px}.toolbar{left:auto;right:max(16px, env(safe-area-inset-right));bottom:max(28px, env(safe-area-inset-bottom));gap:10px;padding:8px;transform:none}.toolbar .hint{display:none}.px-btn--icon{width:54px;height:54px}}