/* Legacy 3D — the 3D HUD in your theme's colours (themes3d.js sets --th-a and --th-b from Menu › Themes; --ab-a and
   --ab-b are the Age button ring colours agebtn.js sets for the theme). */
:root { --th-a: #0ea47a; --th-b: #13b5a6; }

/* the glass cards take a tint of the theme */
body.w3d .w3-glass, body.w3d .w3-me, body.w3d .w3-money, body.w3d .w3-clock, body.w3d .w3-prompt, body.w3d .w3-dock, body.w3d .w3-hint, body.w3d .w3-speed, body.w3d .w3-shift {
  background: linear-gradient(160deg, color-mix(in srgb, var(--th-a) 30%, rgb(12 14 24 / .74)) 0%, rgb(12 14 24 / .66) 70%);
  border-color: color-mix(in srgb, var(--th-b) 40%, rgb(255 255 255 / .1));
  box-shadow: 0 14px 36px -14px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .09);
}
body.w3d .w3-dock { box-shadow: 0 16px 40px -14px rgb(0 0 0 / .75), 0 0 0 1px color-mix(in srgb, var(--th-b) 30%, transparent), inset 0 1px 0 rgb(255 255 255 / .1); }
body.w3d .w3-dock button:hover { background: color-mix(in srgb, var(--th-b) 26%, rgb(255 255 255 / .06)); }
body.w3d .w3-bar b { background: linear-gradient(90deg, var(--th-b), color-mix(in srgb, var(--th-b) 55%, #ffffff)); }
body.w3d .w3-bar.warn b { background: #ffd56a; } body.w3d .w3-bar.bad b { background: #ff7a86; }
body.w3d .w3-cash { color: color-mix(in srgb, var(--th-b) 50%, #ffffff); text-shadow: 0 0 18px color-mix(in srgb, var(--th-b) 45%, transparent); }
body.w3d .w3-prompt em { background: linear-gradient(90deg, var(--th-b), color-mix(in srgb, var(--th-b) 50%, #fff)); }
body.w3d .w3-av { box-shadow: 0 0 0 2px color-mix(in srgb, var(--th-b) 70%, #fff); }

/* the Age button: the theme's colours, its ring, and the living orb when the theme has one */
body.w3d .w3-dock .w3-age { position: relative; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--th-b) 65%, #fff), var(--th-b) 52%, var(--th-a)); box-shadow: 0 0 0 4px var(--ab-a, rgb(255 255 255 / .9)), 0 0 0 7px color-mix(in srgb, var(--ab-b, var(--th-b)) 45%, transparent), 0 14px 32px -6px color-mix(in srgb, var(--th-b) 70%, transparent); }
body.w3d .w3-dock .w3-age:hover { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--th-b) 45%, #fff), var(--th-b) 52%, var(--th-a)); }
body.w3d .w3-dock .w3-age b, body.w3d .w3-dock .w3-age span { position: relative; z-index: 1; text-shadow: 0 1px 5px rgb(0 0 0 / .65); }
body.w3d .w3-dock .w3-age .w3-abcv { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; pointer-events: none; z-index: 0; }
body.w3d .w3-dock .w3-age.ab-live { background: #000; overflow: visible; }
body.w3d .w3-dock .w3-age.ab-shaped { background: transparent; box-shadow: none; }
body.w3d .w3-dock .w3-age.ab-shaped .w3-abcv { inset: -30%; width: 160%; height: 160%; border-radius: 0; }

/* the side panel, the map and the mini games' cards */
body.w3d .w3-panel > header { background: linear-gradient(120deg, color-mix(in srgb, var(--th-a) 85%, #000), color-mix(in srgb, var(--th-b) 60%, #10141f)); }
body.w3d .w3-mapcard { border-top: 3px solid var(--th-b); }
body.w3d .w3-arena .ar-card .go { background: linear-gradient(135deg, color-mix(in srgb, var(--th-b) 80%, #fff), var(--th-a)); color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .4); }
body.w3d .w3-arena .ar-bets { border-color: color-mix(in srgb, var(--th-b) 35%, rgb(255 255 255 / .14)); }
body.w3d .w3-arena .ar-bets .seg button.on { background: linear-gradient(135deg, color-mix(in srgb, var(--th-b) 70%, #fff), var(--th-b)); color: #0a0a0a; }

/* the theme's ambience over the world (the particles only: the painted backdrops and living scenes are the 2D page's) */
html.w3-amb body.w3d #fx { display: block !important; z-index: 5; opacity: .5; }
html.w3-amb body.w3d #fx .fx-orb, html.w3-amb body.w3d #fx .fx-bg, html.w3-amb body.w3d #fx .fx-cv, html.w3-amb body.w3d #fx .fx-sun, html.w3-amb body.w3d #fx .fx-ray,
html.w3-amb body.w3d #fx .fx-mist, html.w3-amb body.w3d #fx .fx-moon, html.w3-amb body.w3d #fx .fx-spider { display: none !important; }
html.w3-amb body.w3d.w3-cine #fx, html.w3-amb body.w3d.w3-dying #fx { display: none !important; }
@media (prefers-reduced-motion: reduce) { html.w3-amb body.w3d #fx { display: none !important; } }