/* Depth (owner 2026-10-23: "the game looks kind of flat ... add the light features you did to the premium skins, make them all just
   normal"). The gentle versions of the premium effects, for every theme: a slowly drifting ambient light behind the game, framed
   and lit panels with corner studs, a light sweep across titles and bars, a glassy dock. Premium themes (themes-premium.css) go
   much further on top. Everything that moves stops with Visual effects off or reduced motion. Loaded after polish.css. */

/* The page colour lives on the root element and the body is see-through, so the backdrop layers and the theme particles
   (negative z-index) are not painted over by the body's own background. */
html { background: var(--bg); }
html { background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--panel2) 70%, transparent), transparent 60%), var(--bg); background-attachment: fixed; }
body, :root[data-premium] body { background: transparent !important; }

/* ---- ambient backdrop: two soft lights drifting, faint motes, a vignette */
body::before {
  content: ''; position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 22%, color-mix(in srgb, var(--accent) 60%, transparent), transparent),
    radial-gradient(1px 1px at 68% 14%, color-mix(in srgb, var(--accent2) 60%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, color-mix(in srgb, var(--text) 40%, transparent), transparent),
    radial-gradient(1px 1px at 84% 62%, color-mix(in srgb, var(--accent) 50%, transparent), transparent),
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent2) 14%, transparent), transparent 40%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 42%);
  animation: depthDrift 40s ease-in-out infinite alternate;
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, #0008 100%);
}
@keyframes depthDrift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-4%, 3%) scale(1.06); }
}

/* ---- panels: a framed edge lit in the theme colour, corner studs, a little glow */
/* each rule below has a plain fallback first, for browsers without color-mix (older phones and app web views) */
.panel { box-shadow: 3px 3px 0 #000, 0 0 18px -10px var(--line), inset 0 1px 0 #ffffff1f; }
.panel { box-shadow: 3px 3px 0 #000, 0 0 18px -10px var(--line), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--line) 35%, transparent); }
.panel:not(.flat)::before, .panel:not(.flat)::after {
  content: ''; position: absolute; top: -3px; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 6px var(--glow); pointer-events: none;
}
.panel:not(.flat)::before { left: -3px; }
.panel:not(.flat)::after { right: -3px; }
.card, .pf-tile { background: linear-gradient(180deg, var(--panel), var(--bg2)); }
.card, .pf-tile { background: linear-gradient(180deg, color-mix(in srgb, var(--panel2) 40%, var(--bg2)), var(--bg2)); }

/* ---- the screen title ribbon gets a slow light sweep */
.screen-title .ribbon { position: relative; overflow: hidden; }
.screen-title .ribbon::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, #ffffff40 50%, transparent 65%);
  transform: translateX(-120%); animation: depthSweep 6s ease-in-out infinite;
}
@keyframes depthSweep { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ---- bars: a moving shine on the fill */
.bar > i { position: relative; overflow: hidden; background-image: linear-gradient(180deg, #ffffff38, transparent 55%); }
.bar > i::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff30, transparent);
  transform: translateX(-100%); animation: depthShine 3.2s linear infinite;
}
@keyframes depthShine { to { transform: translateX(100%); } }

/* ---- buttons: a lit gradient instead of a flat fill */
.btn { background-image: linear-gradient(180deg, #ffffff14, transparent 60%); }
.btn.primary { background-image: linear-gradient(180deg, #ffffff40, transparent 55%, #0000001a); }

/* ---- dock: glass with an accent line on top */
.dock { box-shadow: 0 -2px 0 var(--accent), 0 -10px 24px -14px var(--accent); }
.dock { background-image: linear-gradient(180deg, color-mix(in srgb, var(--panel2) 70%, transparent), var(--panel)); box-shadow: 0 -2px 0 color-mix(in srgb, var(--accent) 40%, transparent), 0 -10px 24px -14px var(--glow); }

/* ---- effects off / reduced motion: keep the light, drop the motion */
html.fx-off body::before, html.fx-off .screen-title .ribbon::after, html.fx-off .bar > i::after { animation: none !important; }
html.fx-off .screen-title .ribbon::after, html.fx-off .bar > i::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  body::before, .screen-title .ribbon::after, .bar > i::after { animation: none !important; }
  .screen-title .ribbon::after, .bar > i::after { display: none; }
}