/* Instruction page — minimal base styles extracted from css/style.css */
:root{
  --indigo:      #2A1B5E;
  --violet:      #5B2E86;
  --magenta:     #C22A86;
  --pink:        #E0398A;
  --amber:       #F2A93B;
  --gold:        #FBC94C;
  --ink:         #150C2E;      /* near-black, footers / nav-dark */
  --ink-soft:    #241638;
  --cream:       #FFF9F2;      /* light section background */
  --paper:       #FFFFFF;
  --line:        #EDE4F5;
  --text-dark:   #1D1330;
  --text-mute:   #6E6280;
  --text-on-dark:#F3EDFF;
  --text-on-dark-mute: #C9BFE0;
  --ok:          #2FAE6A;
  --warn:        #E0398A;

  --brand-gradient: linear-gradient(135deg, var(--indigo) 0%, var(--violet) 28%, var(--magenta) 58%, #E86B3A 82%, var(--amber) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(42,27,94,0.92) 0%, rgba(194,42,134,0.88) 55%, rgba(242,169,59,0.85) 100%);

  /* Shared background used by the home screen and all inner pages. */
  --app-background:
    radial-gradient(ellipse 44% 34% at 7% 16%, rgba(0,103,255,.88) 0%, rgba(0,103,255,.35) 42%, transparent 75%),
    radial-gradient(ellipse 42% 38% at 91% 13%, rgba(228,0,120,.95) 0%, rgba(228,0,120,.38) 48%, transparent 76%),
    radial-gradient(ellipse 48% 43% at 91% 90%, rgba(247,166,35,.95) 0%, rgba(247,166,35,.36) 46%, transparent 77%),
    radial-gradient(ellipse 48% 48% at 8% 91%, rgba(22,4,75,.98) 0%, rgba(22,4,75,.70) 52%, transparent 86%),
    linear-gradient(135deg,#0568ef 0%,#40207d 30%,#a50073 58%,#df2b67 77%,#f4a92d 100%);
  --mid-gradient: linear-gradient(115deg, var(--indigo) 0%, var(--violet) 24%, var(--magenta) 50%, #D9497A 68%, var(--pink) 84%, var(--violet) 100%);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px rgba(42,27,94,0.10);
  --shadow-pop:  0 20px 50px rgba(42,27,94,0.22);

  --font-body: 'Noto Sans Georgian', sans-serif;
  --font-brand: 'Baloo 2', 'Noto Sans Georgian', sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-on-dark);
  background: var(--app-background);
  background-size:160% 160%;
  animation:homeGradient 28s ease-in-out infinite alternate;
  animation-delay: var(--bg-delay, 0s);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}

/* Slow, gently uneven movement so the shift reads as ambient, not mechanical */

@keyframes homeGradient{
  0%{background-position:0% 18%;}
  50%{background-position:58% 42%;}
  100%{background-position:100% 82%;}
}

.site-copyright-fixed{
  position: fixed;
  left: 0;
  bottom: 6px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 16px;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.2px;
  color: rgba(255,255,255,0.65);
  white-space: nowrap;
  pointer-events: none;
}
.site-copyright-fixed img{
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex: none;
}

@media (max-width: 680px){
  .site-copyright-fixed{ bottom: 4px; font-size: 12px; padding-left: 12px; gap: 6px; }
  .site-copyright-fixed img{ width: 20px; height: 20px; }
}