/* Riftorn aspect-fit template: the canvas is sized to the largest 16:9 rect that fits the window
   (see fitCanvas in index.html) and centered; everything else is black, which forms the
   letterbox / pillarbox bars. */
html, body { width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; background: #000 }
#unity-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000 }
#unity-canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #000 }
/* Loading screen (designer 2026-10-25): the characters video looping behind a panel low in the centre with the
   game's name, a gold bar, LOADING and the percentage. No Unity logo. Sized to the canvas's 16:9 rect by fitCanvas.
   Sizes are in cqw (1% of the screen's width) so it scales with the window; the px value before each is the
   fallback for browsers without container units. The font ships with the page: no font service is contacted. */
@font-face { font-family: "Texturina"; src: url("Texturina_18pt-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap }
#loading-screen { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; background: #000;
                  container-type: inline-size; transition: opacity 0.6s ease }
#loading-screen.done { opacity: 0; pointer-events: none }
#loading-video, #loading-still { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover }
#loading-still { display: none }
#loading-screen.still #loading-video { display: none }
#loading-screen.still #loading-still { display: block }
#loading-panel { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); box-sizing: border-box; text-align: center;
                 width: 420px; width: max(280px, 40cqw); padding: 26px 30px 24px; padding: 2.6cqw 3cqw 2.4cqw;
                 border-radius: 12px; border-radius: 1.2cqw; background: rgba(12, 14, 22, 0.84);
                 border: 1px solid rgba(217, 180, 91, 0.55); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
                 color: #ece6d6; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif }
#loading-title { font-family: "Texturina", Georgia, serif; font-weight: 600; font-size: 26px; font-size: max(16px, 2.6cqw);
                 line-height: 1.25; margin-bottom: 20px; margin-bottom: 2cqw }
#loading-bar { position: relative; height: 10px; height: max(6px, 1cqw); border-radius: 99px; overflow: hidden;
               background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(217, 180, 91, 0.45) }
#loading-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: inherit;
                background: linear-gradient(90deg, #8c6b28, #d9b45b 70%, #f3dc95); box-shadow: 0 0 12px rgba(217, 180, 91, 0.55);
                transition: width 0.25s linear }
/* While the game starts up (the loader holds the bar at 90%), a light sweeps the bar so it never looks stuck. */
#loading-screen.starting #loading-fill::after { content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: inherit;
                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
                background-size: 40% 100%; background-repeat: no-repeat; animation: loading-sweep 1.1s linear infinite }
@keyframes loading-sweep { from { background-position: -40% 0 } to { background-position: 140% 0 } }
#loading-row { display: flex; justify-content: center; align-items: baseline; gap: 10px; gap: 1cqw; margin-top: 14px; margin-top: 1.4cqw }
#loading-word { font-family: "Texturina", Georgia, serif; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
                color: #d9b45b; font-size: 19px; font-size: max(13px, 1.9cqw) }
#loading-pct { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 19px; font-size: max(13px, 1.9cqw) }
#loading-status { color: #d8d1bf; font-size: 13px; font-size: max(12px, 1.35cqw); margin-top: 6px; margin-top: 0.6cqw }
@media (prefers-reduced-motion: reduce) { #loading-screen.starting #loading-fill::after { animation: none } }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
/* Rounded like the game's own buttons (designer 2026-10-20: "the buttons that are rectangles need to have rounded
   edges"); the radius clips both backgrounds below. */
#unity-fullscreen-button { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 8px; cursor: pointer; opacity: 0.35; background: url('fullscreen-button.png') no-repeat center; transition: opacity 0.15s }
#unity-fullscreen-button:hover, #unity-fullscreen-button:focus-visible { opacity: 1 }
/* In fullscreen the same button exits it, so it shows arrows pointing IN (drawn here, in the PNG's blue). */
#unity-fullscreen-button.is-fullscreen { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Crect width='38' height='38' rx='8' fill='%231EAED3'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M27 11l-6 6M21 13v4h4M11 27l6-6M17 25v-4h-4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center }