* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #ddd; }
body { display: grid; place-items: center; }
#artwork { position: relative; width: min(100vw, 177.7778vh); height: min(56.25vw, 100vh); overflow: hidden; background: #81cef4; }
#artwork:fullscreen { width: 100vw; height: 100vh; }
#world { display: block; width: 100%; height: 100%; touch-action: none; outline: none; cursor: crosshair; }
#artwork.pointer-locked #world { cursor: none; }
#artwork.pointer-locked #fullscreen { opacity: 0; pointer-events: none; }
#world:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.round-control { position: absolute; width: 38px; height: 38px; padding: 0; border: 1px solid #ffffff8c; border-radius: 50%; color: white; background: #176a9540; box-shadow: inset 0 1px 8px #ffffff40, 0 2px 8px #00456b20; font: 24px/1 Arial, sans-serif; cursor: pointer; touch-action: none; }
.round-control:hover, .round-control:focus-visible { background: #176a9580; outline: 2px solid white; outline-offset: 3px; }
#fullscreen { right: 16px; top: 16px; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(#3da2ec, #d5f4fa); }
#loading[hidden], #error[hidden] { display: none; }
#loading span { width: 42px; height: 42px; border: 2px solid #ffffff55; border-top-color: white; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#error { position: absolute; top: 40%; left: 10%; width: 80%; text-align: center; color: #123c63; font: 16px/1.5 Arial, sans-serif; }
#joystick { display: none; position: absolute; left: 26px; bottom: 22px; width: 96px; height: 96px; border: 1px solid #ffffff80; border-radius: 50%; background: #ffffff16; touch-action: none; }
#stick { position: absolute; width: 40px; height: 40px; left: 27px; top: 27px; background: radial-gradient(at 35% 20%, #ffffffc0, #8edaff66); border: 1px solid #ffffffaa; border-radius: 50%; pointer-events: none; }
#jump { right: 28px; bottom: 38px; width: 48px; height: 48px; }
.touch-control { display: none; }
@media (pointer: coarse) { #joystick, .touch-control { display: block; } }
@media (max-width: 600px) and (orientation: portrait) { #artwork { width: 100vw; height: 100dvh; } }
@media (prefers-reduced-motion: reduce) { #loading span { animation: none; } }

#speech-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.speech-balloon { position: absolute; transform: translate(-50%, -100%); max-width: min(260px, 65vw); min-width: 38px; padding: 9px 13px; border: 1px solid #55554b; border-radius: 7px; background: #ffffe1; color: #202020; box-shadow: 2px 3px 5px #0003; font: 14px/1.4 Tahoma, Arial, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; text-align: center; }
.speech-balloon::after { content: ''; position: absolute; left: calc(50% - 5px); bottom: -6px; width: 10px; height: 10px; background: #ffffe1; border-right: 1px solid #55554b; border-bottom: 1px solid #55554b; transform: rotate(45deg); }
.speech-balloon.is-typing { font-size: 20px; letter-spacing: 3px; padding: 3px 12px 8px; }
#chat-toggle { top: 64px; right: 16px; }
#chat-toggle[data-online="false"]::after { content: ''; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; background: #dfad42; }
.pointer-locked #chat-toggle { opacity: 0; pointer-events: none; }
#chat-form { position: absolute; z-index: 3; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); padding: 9px; border: 1px solid #6d786b; border-radius: 7px; background: #ffffe1; box-shadow: 2px 3px 8px #0003; font: 12px/1.4 Tahoma, Arial, sans-serif; }
#chat-form[hidden], .speech-balloon[hidden] { display: none; }
.chat-entry { display: flex; gap: 6px; }
#chat-input { min-width: 0; flex: 1; resize: none; max-height: 100px; overflow-y: auto; padding: 8px; border: 1px solid #7f9db9; border-radius: 2px; background: white; color: #222; font: 16px/1.3 Tahoma, Arial, sans-serif; }
.chat-entry button { padding: 0 12px; border: 1px solid #7f9db9; border-radius: 3px; background: linear-gradient(#fff, #e5e9d5); color: #263c4b; font-size: 22px; cursor: pointer; }
#chat-status { margin: 5px 1px 0; color: #4c5555; }
.chatting #joystick, .chatting #jump { visibility: hidden; }

#artwork { --map-size: 176px; --hud-gap: 16px; }
#population { position: absolute; z-index: 2; top: var(--hud-gap); left: var(--hud-gap); display: flex; align-items: center; gap: 8px; padding: 7px 11px; color: #f4fcff; border: 1px solid #d6f8ffb0; border-radius: 5px; background: linear-gradient(#227ab4c9, #165181ce); box-shadow: inset 0 1px #ffffff55, 0 2px 6px #06456833; font: 12px/1.3 Tahoma, Arial, sans-serif; pointer-events: none; }
#online-count { min-width: 13px; text-align: center; font-size: 15px; }
.connection-light { width: 7px; height: 7px; border-radius: 50%; background: #f8d36b; box-shadow: 0 0 4px #fff5; }
#population[data-connected="true"] .connection-light { background: #b7ff81; }
#minimap-panel { position: absolute; z-index: 2; right: var(--hud-gap); bottom: var(--hud-gap); width: var(--map-size); height: var(--map-size); padding: 4px; border: 1px solid #e3fcffce; border-radius: 4px; background: linear-gradient(#d9f7fc9c,#11618bba); box-shadow: inset 0 0 0 1px #3c779860, 0 3px 10px #00324a4d; pointer-events: none; }
#minimap { display: block; width: 100%; height: 100%; border: 1px solid #1d658699; }
.map-north { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); color: #fff; text-shadow: 0 1px 2px #084268; font: bold 10px/1 Tahoma, Arial, sans-serif; }
.map-legend { position: absolute; display: flex; align-items: center; justify-content: center; gap: 5px; bottom: 7px; left: 7px; right: 7px; padding: 3px 0; background: #e7f8f3e0; color: #244d62; font: 10px/1.2 Tahoma, Arial, sans-serif; }
.you-dot, .visitor-dot { display: inline-block; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #145be3; }
.visitor-dot { margin-left: 5px; background: #ffb743; border-color: #765523; }
@media (max-width: 700px), (max-height: 500px) { #artwork { --map-size: 126px; --hud-gap: 12px; } }
@media (pointer: coarse) { #jump { right: calc(var(--map-size) + 24px); bottom: 30px; } }

#artwork { --chat-width: min(420px, calc(100% - var(--map-size) - var(--hud-gap) * 3)); --speech-bottom: var(--hud-gap); }
#artwork.chatting { --speech-bottom: calc(var(--chat-panel-height, 82px) + var(--hud-gap) + 8px); }
#artwork:not(.hud-ready) #population, #artwork:not(.hud-ready) #minimap-panel { visibility: hidden; }
#chat-form { left: var(--hud-gap); bottom: var(--hud-gap); width: var(--chat-width); transform: none; }
.speech-balloon.self-speech { pointer-events: auto; touch-action: pan-y; left: var(--hud-gap); top: auto; bottom: var(--speech-bottom); transform: none; width: max-content; max-width: var(--chat-width); max-height: calc(100% - var(--speech-bottom) - 64px); overflow: auto; text-align: left; }
.speech-balloon.self-speech::after { display: none; }
@media (pointer: coarse) { #artwork:not(.chatting) { --speech-bottom: 132px; } }
@media (max-width: 350px) { #artwork { --map-size: 108px; --hud-gap: 10px; } #chat-input { padding: 6px; } .chat-entry { gap: 4px; } .chat-entry button { padding: 0 8px; } }