/* Don't Drop the Ball! page in the game's own look: sky and clouds, grass hills, cream candy cards,
   glossy green buttons, gold coins. Colours come from the game's UI (UIManager, UiArt) and its store
   art (Store/Screenshots/frame.py); headings in Baloo 2 like the store captions, text in Nunito like the
   game's UI. The header is a green candy bar with the Mulesi logo as on the home page. Loaded after site.css,
   scoped to body.dd. */

.dd {
  --dd-ink: #3d424a;        /* UIManager.Ink */
  --dd-ink-soft: #686d74;
  --dd-out: #185416;        /* caption outline */
  --dd-rim: #1a5c05;        /* button outline */
  --dd-green: #45a312;
  --dd-leaf: #adf238;
  --dd-cream: #fff9e8;
  --dd-card: #fbfaf7;       /* UIManager.CardLight */
  --dd-gold: #ffc82e;
  --dd-gold-dark: #d68000;
  --dd-gold-ink: #784205;
  --dd-caption: 3px 0 0 var(--dd-out), -3px 0 0 var(--dd-out), 0 3px 0 var(--dd-out), 0 -3px 0 var(--dd-out),
    2.2px 2.2px 0 var(--dd-out), -2.2px 2.2px 0 var(--dd-out), 2.2px -2.2px 0 var(--dd-out), -2.2px -2.2px 0 var(--dd-out),
    0 7px 0 rgba(10, 50, 20, 0.35);

  background-color: #c4ecff;
  background-image: linear-gradient(180deg, #46aaf5 0, #7cc6f8 480px, #c4ecff 1200px, #e6f6ff 100%);
  background-attachment: scroll;
  color: var(--dd-ink);
}

/* past the footer (short pages, overscroll) the grass goes on; above the header, its green */
html:has(> body.dd) { background: linear-gradient(180deg, #4fae18 50%, #4e9c24 50%); }

/* clouds behind everything */
.dd::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='62' cy='56' r='30'/%3E%3Ccircle cx='102' cy='42' r='38'/%3E%3Ccircle cx='146' cy='58' r='26'/%3E%3Crect x='34' y='56' width='140' height='32' rx='16'/%3E%3C/g%3E%3C/svg%3E") no-repeat 4% 18% / 230px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='62' cy='56' r='30'/%3E%3Ccircle cx='102' cy='42' r='38'/%3E%3Ccircle cx='146' cy='58' r='26'/%3E%3Crect x='34' y='56' width='140' height='32' rx='16'/%3E%3C/g%3E%3C/svg%3E") no-repeat 96% 52% / 300px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='62' cy='56' r='30'/%3E%3Ccircle cx='102' cy='42' r='38'/%3E%3Ccircle cx='146' cy='58' r='26'/%3E%3Crect x='34' y='56' width='140' height='32' rx='16'/%3E%3C/g%3E%3C/svg%3E") no-repeat 12% 86% / 170px auto;
  opacity: 0.75;
}

.dd main a { color: #2f7d12; }
.dd main a:hover { color: var(--dd-out); }

/* ------------------------------------------------------------------ hero: a framed card like the game's panels */

.dd .g-hero {
  background:
    radial-gradient(420px 260px at 88% 0%, rgba(255, 246, 200, 0.75), transparent 70%),
    linear-gradient(180deg, #5db6f6 0%, #a6dafb 45%, #dff3ff 72%, #b6e27c 86%, #6eba34 100%);
  border: 6px solid var(--dd-cream);
  box-shadow: 0 0 0 3px var(--dd-out), 0 30px 70px -30px rgba(10, 50, 20, 0.55);
}
.dd .g-hero .logo { filter: drop-shadow(0 12px 18px rgba(10, 50, 20, 0.3)); }
.dd .g-hero .say { font-size: clamp(26px, 3vw, 34px); color: #fff; text-shadow: var(--dd-caption); letter-spacing: 0.005em; }
.dd .g-hero .say em { font-style: normal; color: var(--dd-gold); }
.dd .g-hero p { color: #24411a; font-weight: 600; }
.dd .g-hero .chips li {
  background: var(--dd-cream); color: var(--dd-rim); border: 2px solid var(--dd-rim);
  box-shadow: inset 0 -3px 0 rgba(200, 180, 150, 0.45), 0 2px 0 var(--dd-rim);
}
.dd .phone { background: #fff; box-shadow: 0 0 0 3px var(--dd-out), 0 -10px 50px rgba(10, 50, 20, 0.25); }
.dd .phone img { border-radius: 32px 32px 0 0; }

/* gold coins hovering over the hero */
.dd .coin {
  position: absolute; z-index: 2; width: 44px; height: 44px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 52%, rgba(214, 128, 0, 0.55) 54% 60%, transparent 62%),
    radial-gradient(circle at 34% 30%, #fff3b8 0 12%, #ffd84a 30%, var(--dd-gold) 55%, var(--dd-gold-dark) 100%);
  box-shadow: inset 0 -3px 0 rgba(150, 80, 0, 0.45), 0 6px 10px rgba(10, 50, 20, 0.25);
}
.dd .coin.c1 { top: 26px; right: 44%; }
.dd .coin.c2 { top: 96px; right: 30px; width: 34px; height: 34px; }
.dd .coin.c3 { bottom: 90px; right: 6%; width: 28px; height: 28px; }

/* ------------------------------------------------------------------ section heads like the store captions */

.dd .kicker {
  padding: 6px 14px 5px; border-radius: 999px; letter-spacing: 0.2em;
  background: var(--dd-cream); color: var(--dd-rim); border: 2px solid var(--dd-rim);
  box-shadow: 0 3px 0 var(--dd-rim);
}
.dd .kicker::before {
  /* the game's ball: white with a black ring */
  width: 12px; height: 12px; border-radius: 50%; margin-right: 8px;
  background: radial-gradient(circle, #fff 0 30%, #1d1d1f 33% 55%, #fff 58%);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.25);
}
.dd .title { color: #fff; text-shadow: var(--dd-caption); margin-top: 6px; margin-bottom: 18px; }
.dd .lead { color: var(--dd-ink); font-weight: 600; }

/* ------------------------------------------------------------------ screens */

.dd .shots { scrollbar-color: var(--dd-green) transparent; }
.dd .shots img {
  border: 5px solid var(--dd-cream);
  box-shadow: 0 0 0 2px var(--dd-out), 0 20px 40px -18px rgba(10, 50, 20, 0.55);
}

/* ------------------------------------------------------------------ cards */

.dd .value, .dd .faq details {
  background: linear-gradient(180deg, #fffefb, var(--dd-card) 60%, #f3eee2);
  border: 2px solid rgba(24, 84, 22, 0.22);
  box-shadow: 0 5px 0 rgba(24, 84, 22, 0.18), 0 18px 40px -22px rgba(10, 50, 20, 0.5);
}
.dd .value h3 { color: var(--dd-out); }
.dd .value p { color: var(--dd-ink-soft); font-weight: 600; }

/* round green candy button, as in the game's menu */
.dd .value .ic {
  border-radius: 50%; color: #fff;
  background: radial-gradient(70% 50% at 50% 18%, rgba(255, 255, 255, 0.55), transparent 70%),
    linear-gradient(180deg, var(--dd-leaf), #6cc11f 45%, var(--dd-green));
  border: 3px solid var(--dd-rim);
  box-shadow: inset 0 -4px 0 rgba(20, 90, 5, 0.45), 0 4px 0 var(--dd-rim);
}
.dd .value .ic svg { filter: drop-shadow(0 1.5px 0 rgba(10, 60, 2, 0.7)); }

.dd .faq details[open] { border-color: var(--dd-green); }
.dd .faq summary { color: var(--dd-out); }
.dd .faq summary::after {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 22px; padding-top: 2px; color: #fff;
  background: linear-gradient(180deg, var(--dd-leaf), var(--dd-green));
  border: 2px solid var(--dd-rim); text-shadow: 0 1px 0 var(--dd-rim);
}
.dd .faq details p { color: var(--dd-ink); }
.dd .faq b { color: var(--dd-out); }

/* ------------------------------------------------------------------ contact: a big green panel with a gold button */

.dd .contact {
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 255, 255, 0.35), transparent 70%),
    linear-gradient(180deg, #8fd83a, #4fae18 55%, #3b9310);
  border: 4px solid var(--dd-rim);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.35), inset 0 -6px 0 rgba(20, 90, 5, 0.35), 0 6px 0 var(--dd-rim),
    0 30px 60px -30px rgba(10, 50, 20, 0.6);
}
.dd .contact .kicker { box-shadow: none; }
.dd .contact .mail { color: #fff; text-decoration: none; text-shadow: 0 2px 0 rgba(20, 90, 5, 0.6); }
.dd .btn-hot {
  color: var(--dd-gold-ink);
  background: radial-gradient(80% 50% at 50% 15%, rgba(255, 255, 255, 0.6), transparent 70%),
    linear-gradient(180deg, #ffeb80, #fdb324 60%, #f29a10);
  border: 3px solid #8c4d05;
  box-shadow: inset 0 -3px 0 rgba(150, 80, 0, 0.4), 0 4px 0 #8c4d05;
}
.dd .btn-hot:hover { color: var(--dd-gold-ink); box-shadow: inset 0 -3px 0 rgba(150, 80, 0, 0.4), 0 6px 0 #8c4d05; }

/* ------------------------------------------------------------------ footer on the grass hills */

.dd footer {
  position: relative; margin-top: 150px; padding-top: 30px; border-top: 0;
  background: #4e9c24;
}
.dd footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 130px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath fill='%2396d452' d='M0 60C200 10 380 10 560 50s380 50 560 0 260-40 320-30V130H0z'/%3E%3Cpath fill='%236eba34' d='M0 95C180 55 360 60 540 85s420 35 600 0 240-30 300-20V130H0z'/%3E%3Cpath fill='%234e9c24' d='M0 118c240-24 480-24 720-6s480 18 720-4V130H0z'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
}
.dd footer .wrap { color: rgba(255, 255, 255, 0.8); }
.dd footer a { color: var(--dd-cream); }
.dd footer a:hover { color: #fff; }

/* ------------------------------------------------------------------ header: a glossy green bar like the game's buttons */

.dd .top, .dd .top.scrolled {
  background: radial-gradient(60% 120% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #8fd83a, #4fae18 60%, #3b9310);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 3px solid var(--dd-rim);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 rgba(26, 92, 5, 0.18);
}
.dd .top.scrolled { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 10px 24px -10px rgba(10, 50, 20, 0.55); }
/* the Mulesi logo as docked on the home page */
.dd .brand img.mark { width: 46px; height: 51px; filter: drop-shadow(0 3px 0 rgba(26, 92, 5, 0.55)); }
.dd .top.scrolled .brand img.mark { width: 40px; height: 44px; transform: none; }
.dd .nav a { color: #fff; font-family: var(--display); font-weight: 800; font-size: 16px; text-shadow: 0 2px 0 var(--dd-rim); }
.dd .nav a:hover { color: var(--dd-gold); }
.dd .lang { background: rgba(20, 90, 5, 0.35); border: 2px solid var(--dd-rim); }
.dd .lang button { color: #eaffd0; }
.lang-tr .dd .lang [data-set="tr"], .lang-en .dd .lang [data-set="en"] { background: var(--dd-cream); color: var(--dd-rim); box-shadow: 0 2px 0 var(--dd-rim); }

/* scroll progress: a gold line with the game's ball */
.dd .progress { bottom: -3px; }
.dd .progress i { background: linear-gradient(90deg, var(--dd-gold-dark), var(--dd-gold), #fff3b8); }
.dd .progress b {
  background: radial-gradient(circle, #fff 0 26%, #1d1d1f 30% 52%, #fff 56%);
  box-shadow: 0 0 10px rgba(173, 242, 56, 0.9);
}

@media (max-width: 860px) {
  .dd .coin.c1 { right: 12%; top: 18px; }
  .dd .coin.c2 { display: none; }
  .dd footer { margin-top: 110px; }
  .dd footer::before { height: 90px; }
}

@media (prefers-reduced-motion: no-preference) {
  .dd .coin { animation: dd-float 3.2s ease-in-out infinite alternate; }
  .dd .coin.c2 { animation-delay: -1.1s; }
  .dd .coin.c3 { animation-delay: -2.2s; }
  @keyframes dd-float { from { transform: translateY(-6px) rotate(-8deg); } to { transform: translateY(8px) rotate(8deg); } }
}

/* ------------------------------------------------------------------ privacy page: one readable cream panel, like the game's cards */

.dd .legal-logo { display: block; width: min(240px, 60%); margin: 34px auto -6px; filter: drop-shadow(0 12px 18px rgba(10, 50, 20, 0.3)); }
.dd .legal {
  max-width: 860px; margin-top: 18px; padding: 40px 52px 44px; border-radius: 34px;
  background: linear-gradient(180deg, #fffefb, var(--dd-card) 40%, #f6f1e6);
  border: 6px solid var(--dd-cream);
  box-shadow: 0 0 0 3px var(--dd-out), 0 30px 70px -30px rgba(10, 50, 20, 0.55);
}
.dd .legal h1 { color: var(--dd-out); }
.dd .legal h2 { color: var(--dd-out); display: flex; align-items: center; gap: 10px; }
.dd .legal h2::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 26%, #1d1d1f 30% 54%, #fff 58%);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.25);
}
.dd .legal p, .dd .legal li { color: var(--dd-ink); }
.dd .legal b { color: var(--dd-out); }
.dd .legal .muted { color: var(--dd-ink-soft); }

@media (max-width: 600px) {
  .dd .brand img.mark { width: 40px; height: 44px; }
  .dd .legal { padding: 28px 20px 30px; border-radius: 26px; }
}