/* Shadow Drop WebGL page: the game fills the whole frame (works inside an iframe on the website). */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0c10; }
body { position: fixed; inset: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff;
       -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#unity-container { position: absolute; inset: 0; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #0b0c10; touch-action: none; outline: none; }

#unity-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
                 justify-content: center; gap: 18px; background: #0b0c10; z-index: 5; }
#unity-loading .title { font-size: 28px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
#unity-progress { width: min(320px, 70vw); height: 8px; border-radius: 8px; background: rgba(255,255,255,.15); overflow: hidden; }
#unity-progress-fill { width: 0%; height: 100%; background: #3b82f6; transition: width .15s ease-out; }
#unity-loading .hint { font-size: 13px; opacity: .6; }

#fs-btn { position: absolute; right: 10px; bottom: 10px; z-index: 4; width: 38px; height: 38px; border: 0; border-radius: 10px;
          background: rgba(0,0,0,.45); color: #fff; font-size: 20px; line-height: 38px; cursor: pointer; display: none; padding: 0; }
#fs-btn:hover { background: rgba(0,0,0,.7); }
/* On touch devices the on-screen controls own the bottom-right corner, so the button moves to the top left */
@media (pointer: coarse) { #fs-btn { right: auto; left: 10px; bottom: auto; top: 10px; } }

/* Phones held upright: ask for landscape (the touch layout is built for it) */
#rotate { position: absolute; inset: 0; z-index: 10; display: none; flex-direction: column; align-items: center;
          justify-content: center; gap: 14px; background: #0b0c10; text-align: center; padding: 24px; }
#rotate .icon { font-size: 54px; }
@media (orientation: portrait) and (pointer: coarse) { #rotate { display: flex; } }