/* Western Isle (Innish Town): the frame and loading screen. The game's own UI CSS is injected by dist/game.js,
   scoped to [data-innish-root]. The root is a size container, so the game's position:fixed layers stay inside it. */
.wi-root { position: absolute; inset: 0; overflow: hidden; container-type: inline-size; background: #06170e; color: #f3ead2;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
.wi-root #c { display: block; width: 100%; height: 100%; }
.wi-root #loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px;
  background: radial-gradient(ellipse at 50% 40%, #1d5a35 0%, #0b3a22 55%, #06170e 100%); color: #f4dd96; font-size: 18px; font-weight: 700;
  letter-spacing: 0.04em; z-index: 10; text-align: center; }
.wi-root #loading small { font-size: 13px; font-weight: 400; color: #cfc5a8; }
.wi-root #loading small:empty { display: none; }
.wi-root #loading-bar { width: min(360px, 60%); height: 10px; margin-top: 4px; border-radius: 5px; overflow: hidden;
  background: rgba(6, 23, 14, 0.74); border: 1px solid rgba(201, 154, 46, 0.6); }
.wi-root #loading-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c99a2e, #f4dd96);
  transform-origin: left; transform: scaleX(0); transition: transform 0.8s linear; }
.wi-root #loading.failed #loading-bar { display: none; }
.wi-root #loading small.error { color: #e8a0a0; white-space: pre-line; text-align: center; max-width: 90%; }
.wi-root.loaded #loading { display: none; }
/* Desktop only (the site's desktop query, as in game-frame.css): a 32px Celtic knotwork frame, gold on deep green, drawn by one
   inline SVG (corners: Solomon's knot; edges: two-strand plait, repeated). The canvas and UI sit inside it: contain:layout makes the
   root's padding box the containing block of the game's position:fixed layers, and the game sizes itself from clientWidth/Height.
   Phones and touch tablets keep the full game area. */
@media (min-width: 1024px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
    .wi-root {
        contain: layout;
        background: linear-gradient(#06170e, #06170e) padding-box, #0f4d2c;
    }
}