.playground-shell{font-family:var(--pixel);padding:54px clamp(16px,3vw,52px) 64px}.realm-intro{padding:24px 0 42px}.realm-intro h1{font:clamp(36px,6vw,84px)/1.3 var(--pixel);margin:24px 0}.realm-intro em{font-style:normal;color:var(--muted)}.realm-intro p{font:12px/2 var(--pixel);color:var(--muted)}.realm{border:1px solid var(--line);background:var(--ink);color:var(--paper)}.realm-toolbar,.realm-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;background:var(--ink)}.realm-toolbar{border-bottom:1px solid var(--line)}.realm-toolbar strong{font:12px/1.7 var(--pixel)}.realm-toolbar p,.realm-bottom p{font:9px/1.9 var(--pixel);color:var(--muted);margin:8px 0 0}.realm-actions{display:flex;gap:10px;flex-wrap:wrap}.realm-actions .wallet-connect{font-size:9px}.realm-space{position:relative;height:max(650px,78svh);overflow:hidden;background:var(--ink)}#realm-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#realm-canvas:active{cursor:grabbing}.realm-coordinate{position:absolute;left:20px;bottom:20px;pointer-events:none;font:8px var(--pixel);color:var(--muted)}.realm-zoom{position:absolute;right:20px;bottom:20px;display:flex;gap:8px}.realm-message{position:absolute;top:45%;left:10%;right:10%;text-align:center;font:12px/2 var(--pixel);pointer-events:none;background:var(--ink);padding:20px}.realm-bottom{border-top:1px solid var(--line);flex-wrap:wrap}.realm-bottom p{margin:0}#realm-find{display:flex;gap:12px;align-items:center;font:9px var(--pixel)}#realm-id{width:90px;min-height:38px;padding:10px;border:1px solid var(--line);border-radius:0;background:var(--ink);color:var(--paper);font:11px var(--pixel)}.realm:fullscreen{display:flex;flex-direction:column;width:100%;height:100%;padding:0}.realm:fullscreen .realm-space{flex:1;height:auto;min-height:0}.realm:fullscreen .realm-toolbar,.realm:fullscreen .realm-bottom{flex-shrink:0}.realm [hidden]{display:none!important}@media(max-width:800px){.realm-toolbar{align-items:flex-start;flex-direction:column;padding:16px}.realm-actions{gap:8px}.realm-actions .wallet-connect{font-size:8px;padding:10px}.realm-space{height:75svh;min-height:450px}.realm-bottom{padding:16px}.realm-bottom p{font-size:8px}.playground-shell{padding-top:28px}.realm-intro{padding-bottom:26px}#realm-find{flex-wrap:wrap}}

/* Use the landing teaser's exact field, sprite sizes and animation styles. */
.realm-stage{position:relative}.realm-space.riot-field{height:max(820px,100svh);cursor:default}.realm-space .riot-shadow{min-height:0}.riot-canonical-light{display:none}body.light .riot-canonical-dark{display:none}body.light .riot-canonical-light{display:inline}.realm:fullscreen .realm-stage{flex:1;min-height:0}.realm:fullscreen .realm-space.riot-field{height:100%;min-height:0}@media(max-width:700px){.realm-space.riot-field{height:max(640px,85svh)}}

/* The field fills the outer realm: no inner square or inset crop. */
.realm-stage,.realm-space.riot-field{display:block;width:100%;max-width:none;margin:0;padding:0;aspect-ratio:auto;clip-path:none;mask:none;-webkit-mask:none}
.realm-space.riot-field{background-color:var(--ink);background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:32px 32px;background-position:0 16px}
body.light .realm-space.riot-field{background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px)}
.realm-message{background:transparent}

/* Pan the world inside one edge-to-edge viewport, including while zoomed out. */
.realm-space.riot-field{touch-action:none;cursor:grab}.realm-space.riot-field.is-dragging{cursor:grabbing}.realm-space.riot-field.is-dragging .riot-shadow{cursor:grabbing}.realm-camera-controls{position:absolute;z-index:4;right:16px;bottom:16px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(100% - 32px)}.realm-camera-controls .wallet-connect{background:var(--ink);min-width:40px;min-height:40px;justify-content:center;padding:10px;font-size:12px}.realm-camera-controls .wallet-connect:hover{background:var(--paper);color:var(--ink)}.realm-coordinate{z-index:4;background:var(--ink);padding:6px;bottom:68px;left:auto;right:16px}.realm-space .riot-shadow[hidden]{display:none!important}.realm-stage{overflow:hidden}.realm-message{z-index:4}
.realm-population{display:flex;align-items:center;gap:10px;padding-right:12px;border-right:1px solid var(--line)}.realm-population>span{font:10px/1.6 var(--pixel);white-space:nowrap}.realm-population .wallet-connect{min-width:38px;justify-content:center}.realm-population .wallet-connect:disabled{opacity:.35;cursor:default}@media(max-width:800px){.realm-population{border-right:0;padding-right:0}}
#realm-invite{display:flex;gap:12px;align-items:center;font:9px var(--pixel)}#realm-invite-id{width:90px;min-height:38px;padding:10px;border:1px solid var(--line);border-radius:0;background:var(--ink);color:var(--paper);font:11px var(--pixel)}@media(max-width:800px){#realm-invite{flex-wrap:wrap}}