/* CADDYCLOTH colors. Every color in the app lives here.
   Switch theme: <html data-theme="charcoal-gold"> in index.html (preview another: ?theme=charcoal-gold). */
:root{
  /* shared, theme-independent (product + print realism) */
  --white:#ffffff;--white-rgb:255,255,255;--black:#000000;--shadow-rgb:0,0,0;
  --print-bg:#ffffff;--towel:#F6F6F8;--towel-ink-rgb:10,10,15;
  --grommet-1:#6E4F12;--grommet-2:#E9C76A;--grommet-3:#FFF4C8;--grommet-4:#B88A2A;--grommet-5:#F2D47E;--grommet-6:#7A5A16;
  --grommet-hi-rgb:255,246,210;--grommet-lo-rgb:90,64,14;--hole-1:#2a2a33;--hole-2:#050507;
  --cup-0:#000000;--cup-1:#07080b;--cup-2:#22252c;--lip-rgb:244,244,247;
  --pole-1:#9aa0aa;--pole-2:#ffffff;--pole-3:#7d828c;--ball:#ffffff;
  --turf-1:#0E2417;--turf-2:#050C08;--turf-stripe-rgb:120,255,170;
}
:root,[data-theme="charcoal-gold"]{
  --bg:#161616;--bg-rgb:22,22,22;--surface:#222222;--surface-2:#252525;--line:#2e2e2e;
  --text:#EDEDED;--text-rgb:237,237,237;--muted:#A8A8A8;--muted-2:#8a8a8a;
  --accent:#C9A86A;--accent-rgb:201,168,106;--accent-hi:#D4B97E;--accent-deep:#A8884C;
  --accent-2:#C9A86A;--accent-2-rgb:201,168,106;--on-accent:#161616;--on-accent-2:#161616;
  --grad-1:#D4B97E;--grad-2:#C9A86A;--grad-3:#A8884C;
  --cream:#E6D6B4;--cream-rgb:230,214,180;--err:#E0796B;--err-rgb:224,121,107;--warn:#D4B97E;--warn-rgb:212,185,126;
  --stage:#1e1e1e;--stage-hi:#262626;--shimmer:#2a2a2a;--code-bg:#1a1a1a;
  --grain-opacity:.05;
  --glow:0 0 0 1px rgba(201,168,106,.55),0 0 16px rgba(201,168,106,.16);
  /* canvas */
  --flag-1:#D4B97E;--flag-2:#C9A86A;--flag-3:#A8884C;--break-1:#C9A86A;--break-2:#EDEDED;--turf-arrow:#C8CDD2;--tile-hover:#E8D5A3;
  --power-1:#A8884C;--power-2:#C9A86A;--power-3:#D4B97E;--aim:#EDEDED;--aim-rgb:237,237,237;--aim-hot:#D4B97E;
  --accent-deep-rgb:168,136,76;--fx-k:1;--fx-body:linear-gradient(transparent,transparent);--grain-blend:normal;
  --fx-glow-1:none;--fx-glow-2:none;--fx-brand:0 2px 0 rgba(0,0,0,.35);
  --stage-bg:radial-gradient(80% 70% at 50% 45%,#262626,#1e1e1e);--stage-pad:8px;--stage-radius:10px;--fan-border:5px;--thumb-pad:3px;
  --cv-flag-glow:rgba(0,0,0,.35);--cv-flag-blur:6;--cv-frame:rgba(201,168,106,.45);--cv-glow-blur:0;--cv-pull:rgba(201,168,106,.8);--cv-aim-blur:0;
  --cv-ball-glow:rgba(0,0,0,.4);--cv-ball-blur:6;--halo-1:rgba(201,168,106,.12);--halo-2:rgba(201,168,106,.05);--halo-3:rgba(201,168,106,0);
  --cv-towel-glow:rgba(0,0,0,.45);--cv-towel-blur:50;
  --trail:#EDEDED;--trail-rgb:237,237,237;--cv-trail-blur:0;--contour:#C9A86A;--contour-rgb:201,168,106;--contour-a:.10;--cv-contour-blur:0;--cv-rim-glow:rgba(0,0,0,0);--cv-rim-blur:0;
  --fx-play-box:none;--fx-play-text:none;--fx-play-drop:drop-shadow(0 0 0 transparent);
  --fx-glow-3:none;--fx-tab:none;--fx-btn:none;--fx-card:none;--fx-haze:none;--fx-grid:none;--fx-title:none;
  /* p9: crisp text outline on the PLAY page + a colored ring on every button (like the home PLAY tile) */
  --text-outline:rgba(0,0,0,.75);--play-stroke:.5px;--play-title-stroke:1px;
  --fx-play-outline:1px 0 0 rgba(0,0,0,.7),-1px 0 0 rgba(0,0,0,.7),0 1px 0 rgba(0,0,0,.7),0 -1px 0 rgba(0,0,0,.7);
  --btn-ring:linear-gradient(120deg,var(--grad-1),var(--grad-2),var(--grad-3));--btn-ring-w:1.5px;
  --towel-ring:linear-gradient(135deg,var(--grad-1),var(--grad-2) 50%,var(--grad-3));--towel-ring-w:2px;--towel-r:12px;--towel-glow:0 0 10px rgba(var(--accent-rgb),.30),0 0 18px rgba(var(--accent-2-rgb),.16);
}
[data-theme="neon"]{
  --bg:#0A0A0F;--bg-rgb:10,10,15;--surface:#111118;--surface-2:#16161F;--line:#24242F;
  --text:#F4F4F7;--text-rgb:244,244,247;--muted:#9A9AAB;--muted-2:#6c6c7c;
  --accent:#19E3F0;--accent-rgb:25,227,240;--accent-hi:#7FF3FA;--accent-deep:#8A3FFC;
  --accent-2:#FF2E88;--accent-2-rgb:255,46,136;--on-accent:#04161A;--on-accent-2:#ffffff;
  --grad-1:#19E3F0;--grad-2:#8A3FFC;--grad-3:#FF2E88;
  --cream:#F1E3C0;--cream-rgb:241,227,192;--err:#FF5C7A;--err-rgb:255,92,122;--warn:#FFB547;--warn-rgb:255,181,71;
  --stage:#f2f2f4;--stage-hi:#f2f2f4;--shimmer:#1d1d29;--code-bg:#07070B;
  --grain-opacity:.09;
  --glow:0 0 0 1px rgba(25,227,240,.55),0 0 18px rgba(25,227,240,.45),0 0 42px rgba(25,227,240,.18);
  --flag-1:#FF2E88;--flag-2:#ff5aa3;--flag-3:#d81b6f;--break-1:#19E3F0;--break-2:#FF2E88;--turf-arrow:#C8CDD2;--tile-hover:#19E3F0;
  --power-1:#19E3F0;--power-2:#8A3FFC;--power-3:#FF2E88;--aim:#19E3F0;--aim-rgb:25,227,240;--aim-hot:#FF2E88;
  --accent-deep-rgb:138,63,252;--fx-k:2;--fx-body:radial-gradient(120% 60% at 50% -10%,rgba(138,63,252,.18),transparent 60%);--grain-blend:overlay;
  --fx-glow-1:0 0 14px rgba(25,227,240,.6);--fx-glow-2:0 0 18px rgba(255,46,136,.5);--fx-brand:0 0 16px rgba(25,227,240,.7),0 2px 0 rgba(0,0,0,.35);
  --stage-bg:#f2f2f4;--stage-pad:0px;--stage-radius:0px;--fan-border:0px;--thumb-pad:0px;
  --cv-flag-glow:rgba(255,46,136,.55);--cv-flag-blur:10;--cv-frame:rgba(25,227,240,.55);--cv-glow-blur:14;--cv-pull:rgba(255,46,136,.75);--cv-aim-blur:10;
  --cv-ball-glow:rgba(25,227,240,.9);--cv-ball-blur:12;--halo-1:rgba(25,227,240,.22);--halo-2:rgba(138,63,252,.12);--halo-3:rgba(255,46,136,0);
  --cv-towel-glow:rgba(25,227,240,.55);--cv-towel-blur:70;
  /* MORE NEON: green, trail, contours, cup ring */
  --turf-1:#0E3A24;--turf-2:#03100A;--turf-stripe-rgb:60,255,170;
  --trail:#19E3F0;--trail-rgb:25,227,240;--cv-trail-blur:12;--contour:#3CFFAA;--contour-rgb:60,255,170;--contour-a:.30;--cv-contour-blur:6;--cv-rim-glow:rgba(25,227,240,.95);--cv-rim-blur:14;
  --fx-glow-3:0 0 12px rgba(138,63,252,.7),0 0 30px rgba(138,63,252,.35);
  --fx-title:0 0 10px rgba(25,227,240,.55),0 0 28px rgba(138,63,252,.35);
  --fx-tab:0 0 0 1px rgba(255,46,136,.8),0 0 14px rgba(255,46,136,.7),0 0 34px rgba(255,46,136,.3);
  /* PLAY page: the PLAY tab's pink neon on everything */
  --fx-play-box:0 0 0 1px rgba(255,46,136,.8),0 0 14px rgba(255,46,136,.6),0 0 34px rgba(255,46,136,.25);
  /* p9: outline first (readable), then a SMALL pink glow (was 8px .75 + 22px .4 = blown out) */
  --fx-play-text:1px 0 0 rgba(0,0,0,.9),-1px 0 0 rgba(0,0,0,.9),0 1px 0 rgba(0,0,0,.9),0 -1px 0 rgba(0,0,0,.9),1px 1px 0 rgba(0,0,0,.9),-1px -1px 0 rgba(0,0,0,.9),0 0 7px rgba(255,46,136,.35);
  --fx-play-drop:drop-shadow(0 0 5px rgba(255,46,136,.45));
  --fx-play-outline:1px 0 0 rgba(0,0,0,.9),-1px 0 0 rgba(0,0,0,.9),0 1px 0 rgba(0,0,0,.9),0 -1px 0 rgba(0,0,0,.9),1px 1px 0 rgba(0,0,0,.9),-1px -1px 0 rgba(0,0,0,.9);
  --text-outline:rgba(0,0,0,.9);--play-stroke:.6px;--play-title-stroke:1.5px;
  --btn-ring:linear-gradient(120deg,var(--grad-1),var(--grad-2),var(--grad-3));--btn-ring-w:1.5px;
  --towel-ring:linear-gradient(135deg,var(--grad-1),var(--grad-2) 50%,var(--grad-3));--towel-ring-w:2px;--towel-r:12px;--towel-glow:0 0 10px rgba(var(--accent-rgb),.30),0 0 18px rgba(var(--accent-2-rgb),.16);
  --fx-btn:0 0 0 1px rgba(25,227,240,.7),0 0 16px rgba(25,227,240,.55),0 0 40px rgba(138,63,252,.3);
  --fx-card:0 0 0 1px rgba(25,227,240,.28),0 0 22px rgba(138,63,252,.18);
  --fx-haze:radial-gradient(90% 50% at 85% 0%,rgba(255,46,136,.14),transparent 60%),radial-gradient(80% 45% at 0% 100%,rgba(25,227,240,.10),transparent 60%);
  --fx-grid:repeating-linear-gradient(0deg,rgba(25,227,240,.045) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(138,63,252,.04) 0 1px,transparent 1px 32px);
}