/*!
 * Golf Solitaire — loading screen styles (LOOK only).
 * Base overlay + fade-out come from kit/tz-game-loader.css; load this AFTER it.
 * A fan of cards is dealt on green felt, matching the board so the loader →
 * game hand-off is seamless.
 */
#tz-game-loader.golf-loader{
  background: radial-gradient(120% 85% at 50% 32%, #2f6b46 0%, #1d5b39 56%, #0c3d27 100%);
  color:#f6f2e7;
}
.cl-wrap{ display:flex; flex-direction:column; align-items:center; gap:22px; padding:24px;
  font-family:"Bitter","Georgia",serif; }

/* the dealt card fan */
.cl-fan{ position:relative; width:128px; height:112px; }
.cl-card{ position:absolute; left:50%; bottom:0; width:64px; height:90px; margin-left:-32px;
  background:#fcfbf7; border-radius:9px; border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 22px rgba(0,0,0,.40); transform-origin:50% 112%;
  display:flex; align-items:center; justify-content:center; }
.cl-cL{ animation: cl-fanL 2.4s ease-in-out infinite; }
.cl-cM{ z-index:2; animation: cl-fanM 2.4s ease-in-out infinite; }
.cl-cR{ animation: cl-fanR 2.4s ease-in-out infinite; }
.cl-pip{ font-style:normal; font-size:34px; line-height:1; color:#1a1a1a; }
@keyframes cl-fanL{ 0%,100%{ transform:rotate(0); } 45%{ transform:rotate(-24deg) translateX(-4px); } }
@keyframes cl-fanM{ 0%,100%{ transform:translateY(0) scale(1); } 45%{ transform:translateY(-12px) scale(1.04); } }
@keyframes cl-fanR{ 0%,100%{ transform:rotate(0); } 45%{ transform:rotate(24deg) translateX(4px); } }

.cl-title{ font-size:30px; font-weight:800; letter-spacing:.3px; line-height:1;
  background:linear-gradient(180deg,#ffffff,#ffe9a8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cl-sub{ font-size:13px; opacity:.62; margin-top:-8px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }

@media (prefers-reduced-motion: reduce){ .cl-card{ animation:none !important; } }