* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #1c3037; color: #fff; font-family: system-ui, sans-serif; overscroll-behavior: none; }
#safe-insets { position: fixed; visibility: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); pointer-events: none; }
#game-frame { position: fixed; width: min(100vw, 56.25dvh, 540px); height: min(100dvh, 177.7778vw, 960px); left: 50%; top: 50%; transform: translate(-50%, -50%); }
#unity-canvas { display: block; width: 100%; height: 100%; background: #1c3037; touch-action: none; outline: none; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: #1c3037; }
#loading[hidden] { display: none; }
progress { width: 62%; height: 8px; accent-color: #dc3658; }
#error { position: absolute; inset: 20% 5%; padding: 20px; background: #1c3037; }
.share-backdrop { position: fixed; inset: 0; z-index: 1000; background: #000b; display: grid; place-items: center; padding: 16px; }
.share-panel { width: min(100%, 420px); max-height: 90dvh; overflow: auto; border-radius: 12px; padding: 16px; background: #243e46; }
.share-panel img { display: block; max-height: 36dvh; max-width: 100%; margin: 0 auto 12px; object-fit: contain; }
.share-panel textarea { width: 100%; height: 104px; resize: none; color: #fff; background: #182d34; border: 1px solid #65858e; border-radius: 6px; padding: 8px; font: inherit; }
.share-panel p { margin: 8px 0 12px; font-size: 13px; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.share-panel button, .share-panel a { border: 0; border-radius: 6px; padding: 12px; font: inherit; text-decoration: none; color: #fff; background: #b82649; cursor: pointer; }
.share-panel .share-close { background: #4c6972; }