/* Boot splash shown by index.html while the WebAssembly runtime downloads.
   Needs to be plain CSS: it renders before Blazor and MudBlazor are loaded. */

:root {
  /* Greens */
  --green-900: #102a20;
  --green-800: #14352a;
  --green-700: #1f3a2e;
  --green-600: #2a4a3a;
  --green-500: #3a5d4a;
  --green-300: #6e8a7c;
  --green-100: #c4d3c9;

  /* Creams / paper */
  --cream-50:  #faf6ec;
  --cream-100: #f4efe4;
  --cream-200: #ede6d3;
  --cream-300: #ddd4bd;

  /* Ink */
  --ink-900: #1a1a1a;
  --ink-700: #2c2c2a;
  --ink-500: #5a5a55;
  --ink-400: #888378;
  --ink-300: #b3ad9f;
  --ink-200: #cec8b8;

  /* Accent — aged brass */
  --brass-700: #8a5a2b;
  --brass-600: #a8743a;
  --brass-500: #b8862d;
  --brass-300: #d6b787;

  /* Semantic */
  --bg:            var(--cream-100);
  --bg-elev:       #faf7ed;
  --bg-sunk:       #ede6d3;
  --border:        #d8cfb6;
  --border-strong: #b9ae8f;
  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-faint:      var(--ink-400);
  --primary:       var(--green-700);
  --accent:        var(--brass-600);

  /* Status */
  --good: #3f7a5a;
  --bad:  #a83a3a;

  /* Fonts */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Shape */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
}

/* PageLoader */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--cream-100);
  z-index: 9999;
  display: grid;
  place-items: center;
  animation: pl-fade-in 0.25s ease-out both;
}
.page-loader.fading { animation: pl-fade-out 0.4s ease-in both; pointer-events: none; }
@keyframes pl-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes pl-fade-out { to   { opacity: 0; } }

.page-loader-inner   { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.page-loader-brand   { display: inline-flex; align-items: center; gap: 12px; color: var(--green-800); }
.page-loader-wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* PuttLoader */
.putt-loader { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink-900); }
.putt-loader svg { display: block; overflow: visible; }

.pl-green       { fill: var(--green-700); }
.pl-green-light { fill: var(--green-300); opacity: 0.55; }
.pl-hole        { fill: #0d1612; }
.pl-hole-rim    { fill: none; stroke: var(--green-800); stroke-width: 1; }
.pl-pole        { fill: var(--ink-300); }
.pl-flagstick   { transform-origin: 218px 86px; }
.pl-flag {
  fill: var(--brass-600);
  transform-origin: 218px 28px;
  animation: pl-flag-wave 1.6s ease-in-out infinite;
}
@keyframes pl-flag-wave {
  0%, 100% { transform: skewY(-2deg) scaleX(1); }
  50%      { transform: skewY(2deg)  scaleX(0.94); }
}

.pl-ball-group { animation: pl-ball-roll 2.6s cubic-bezier(.55,.05,.7,.45) infinite; }
.pl-ball       { fill: var(--cream-50); stroke: var(--ink-300); stroke-width: 0.6; }
.pl-ball-shine { fill: rgba(255,255,255,0.85); }
.pl-ball-shadow { fill: rgba(0,0,0,0.22); animation: pl-shadow 2.6s cubic-bezier(.55,.05,.7,.45) infinite; }

@keyframes pl-ball-roll {
  0%            { transform: translate(54px, 86px) scale(1); }
  4%            { transform: translate(54px, 78px) scale(1); }
  10%           { transform: translate(70px, 86px) scale(1); }
  78%           { transform: translate(214px, 86px) scale(1); }
  86%           { transform: translate(218px, 87px) scale(0.65); }
  92%           { transform: translate(218px, 92px) scale(0.2); opacity: 0.3; }
  93%           { opacity: 0; transform: translate(218px, 92px) scale(0); }
  94%, 100%     { opacity: 0; transform: translate(54px, 86px) scale(0); }
}
@keyframes pl-shadow {
  0%        { transform: translate(54px, 92px) scale(1); opacity: 0.6; }
  10%       { transform: translate(70px, 92px) scale(1); opacity: 0.6; }
  78%       { transform: translate(214px, 92px) scale(1); opacity: 0.6; }
  86%       { transform: translate(218px, 92px) scale(0.4); opacity: 0.2; }
  92%, 100% { opacity: 0; transform: translate(218px, 92px) scale(0); }
}

.pl-crow-fill { fill: var(--ink-900); }
.pl-crow-beak { fill: var(--brass-600); }
.pl-crow-eye  { fill: var(--cream-50); }
.pl-crow-wing { fill: #2c302a; }
.pl-mound     { fill: var(--green-300); opacity: 0.55; }
.pl-crow-body {
  transform-origin: 0 0;
  animation: pl-crow-tilt 2.6s ease-in-out infinite;
}
@keyframes pl-crow-tilt {
  0%, 70%   { transform: rotate(0deg); }
  82%       { transform: rotate(-12deg) translateY(-1px); }
  92%, 100% { transform: rotate(0deg); }
}

.pl-text  { text-align: center; }
.pl-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-900);
  display: inline-flex;
  align-items: baseline;
}
.pl-sub   { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-top: 4px; }
.pl-dots  { display: inline-flex; margin-left: 4px; gap: 2px; }
.pl-dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brass-600);
  animation: pl-dot 1.2s ease-in-out infinite;
}
.pl-dots span:nth-child(2) { animation-delay: 0.15s; }
.pl-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes pl-dot {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-2px); }
}