/* Gatorville — base layer (core). UI and game styles live in ui.css / game.css. */
:root {
  --gv-orange: #FA4616;
  --gv-blue: #0021A5;
  --gv-navy: #0e1730;
  --gv-ink: #0a1024;
  --gv-paper: #f4f1e8;
  --gv-font: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --gv-safe-t: env(safe-area-inset-top, 0px);
  --gv-safe-r: env(safe-area-inset-right, 0px);
  --gv-safe-b: env(safe-area-inset-bottom, 0px);
  --gv-safe-l: env(safe-area-inset-left, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--gv-ink); color: var(--gv-paper);
  font-family: var(--gv-font); overscroll-behavior: none; -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
#map {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none;
  image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; background: var(--gv-ink);
}
#map.gv-pointing { cursor: pointer; }
#map.gv-grabbing { cursor: grabbing; }

/* DOM overlay: the root ignores the pointer so the map stays draggable; children opt back in. */
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#ui > * { pointer-events: none; }
.gv-slot { position: absolute; display: flex; flex-direction: column; gap: 8px; }
.gv-slot > * { pointer-events: auto; }
.gv-slot-top-left { top: calc(12px + var(--gv-safe-t)); left: calc(12px + var(--gv-safe-l)); align-items: flex-start; }
.gv-slot-top-right { top: calc(12px + var(--gv-safe-t)); right: calc(12px + var(--gv-safe-r)); align-items: flex-end; }
.gv-slot-bottom-left { bottom: calc(12px + var(--gv-safe-b)); left: calc(12px + var(--gv-safe-l)); align-items: flex-start; flex-direction: column-reverse; }
.gv-slot-bottom-right { bottom: calc(12px + var(--gv-safe-b)); right: calc(12px + var(--gv-safe-r)); align-items: flex-end; flex-direction: column-reverse; }
.gv-slot-center { inset: 0; align-items: center; justify-content: center; }
.gv-slot-side { top: 0; right: 0; bottom: 0; align-items: stretch; justify-content: center; }
.gv-no-ui #ui, .gv-no-ui #attribution, .gv-no-ui #loading { display: none !important; }

.gv-toasts { position: absolute; left: 50%; bottom: calc(44px + var(--gv-safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.gv-toast {
  background: var(--gv-navy); color: var(--gv-paper); border: 2px solid var(--gv-paper); box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
  padding: 8px 12px; font-size: 13px; max-width: min(92vw, 420px); text-align: center; animation: gv-pop .18s steps(3) both;
}
.gv-toast.gv-out { opacity: 0; transition: opacity .35s; }
@keyframes gv-pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* attribution: stays visible. The UI module may restyle or re-home #attribution but must keep the text. */
#attribution {
  position: fixed; left: 50%; bottom: calc(4px + var(--gv-safe-b)); transform: translateX(-50%); z-index: 5;
  font-size: 10px; line-height: 1.3; letter-spacing: .02em; color: rgba(244, 241, 232, .72); background: rgba(10, 16, 36, .55);
  padding: 2px 8px; border-radius: 2px; white-space: nowrap; max-width: 96vw; overflow: hidden; text-overflow: ellipsis; pointer-events: auto;
}
#attribution a { color: inherit; }

/* loading card */
#loading {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, #1d2f5e 0%, #121d40 55%, #070b1c 100%);
  transition: opacity .5s ease .1s, visibility 0s linear .6s;
}
.gv-ready #loading, .gv-painted #loading { opacity: 0; visibility: hidden; }
.gv-load-box { text-align: center; }
.gv-load-title { font-weight: 800; font-size: 22px; letter-spacing: .32em; margin: 18px 0 6px .32em; color: var(--gv-paper); text-shadow: 3px 3px 0 var(--gv-blue); }
.gv-load-sub { font-size: 12px; color: rgba(244, 241, 232, .7); }
.gv-load-cube { width: 48px; height: 48px; margin: 0 auto; position: relative; animation: gv-bob 1s steps(4) infinite alternate; }
.gv-load-cube i { position: absolute; display: block; }
.gv-load-cube i:nth-child(1) { left: 0; top: 0; width: 48px; height: 24px; background: #ff8a5c; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.gv-load-cube i:nth-child(2) { left: 0; top: 12px; width: 24px; height: 36px; background: var(--gv-orange); clip-path: polygon(0 0, 100% 33.3%, 100% 100%, 0 66.7%); }
.gv-load-cube i:nth-child(3) { left: 24px; top: 12px; width: 24px; height: 36px; background: #b8320f; clip-path: polygon(0 33.3%, 100% 0, 100% 66.7%, 0 100%); }
@keyframes gv-bob { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .gv-load-cube, .gv-toast { animation: none; } }