/* ==========================================================
   PLATINUM NETWORK - LAYOUT COMPACT FIX
   Fixes: right-side horizontal overflow, excess page height
========================================================== */

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
}

#root {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Anything using 100vw as a width causes the right-side overflow bug
   whenever a scrollbar is present (vw includes the scrollbar's width).
   Force those back to 100%. */
[style*="100vw"], .w-screen {
    width: 100% !important;
    max-width: 100% !important;
}

/* Prevent any element from being wider than its container */
* {
    max-width: 100%;
}

img, svg, video, canvas, iframe, table {
    max-width: 100% !important;
    height: auto;
}

/* Reduce default excess vertical spacing site-wide (compact pass) */
section, .section, .page-section {
    padding-top: clamp(20px, 4vw, 48px) !important;
    padding-bottom: clamp(20px, 4vw, 48px) !important;
}

.container, .container-fluid, .max-w-7xl, .max-w-6xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

@media (max-width: 768px) {
    section, .section, .page-section {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .mb-8 { margin-bottom: 1rem !important; }
    .mb-6 { margin-bottom: 0.75rem !important; }
    .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-6 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
}

/* ==========================================================
   Footer "Join Our Community" social icon row - was wrapping
   into 2-3 rows on mobile because each button is a large 64px
   circle. Shrink buttons + tighten gap so they fit in fewer rows.
========================================================== */

div:has(> a[title="Telegram"]) {
    gap: 8px !important;
    row-gap: 8px !important;
    flex-wrap: wrap !important;
}

a[title="Telegram"], a[title="Twitter"], a[title="YouTube"],
a[title="Instagram"], a[title="Discord"] {
    padding: 10px !important;
}

a[title="Telegram"] svg, a[title="Twitter"] svg, a[title="YouTube"] svg,
a[title="Instagram"] svg, a[title="Discord"] svg {
    width: 20px !important;
    height: 20px !important;
}

@media (max-width: 420px) {
    a[title="Telegram"], a[title="Twitter"], a[title="YouTube"],
    a[title="Instagram"], a[title="Discord"] {
        padding: 8px !important;
    }
    a[title="Telegram"] svg, a[title="Twitter"] svg, a[title="YouTube"] svg,
    a[title="Instagram"] svg, a[title="Discord"] svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ==========================================================
   Remove Discord from the social row entirely
========================================================== */

a[title="Discord"] {
    display: none !important;
}

/* ==========================================================
   Shrink "Download APK" and "Play Store" buttons
========================================================== */

a[title="Download APK"], a[title="Play Store"] {
    padding: 8px !important;
}

a[title="Download APK"] svg, a[title="Play Store"] svg {
    width: 18px !important;
    height: 18px !important;
}

@media (max-width: 420px) {
    a[title="Download APK"], a[title="Play Store"] {
        padding: 6px !important;
    }
    a[title="Download APK"] svg, a[title="Play Store"] svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Real Google Play badge instead of the generic icon.
   Upload the official badge (from Google's own brand-assets page)
   to /static/media/playstore-icon.png - this rule then swaps it in
   automatically. Until that file is uploaded this has no visible effect. */

a[title="Play Store"] svg {
    display: none;
}

a[title="Play Store"] {
    background-image: url('/static/media/playstore-icon.png');
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}

/* ==========================================================
   Dashboard page only (detected via the mining coin element,
   which only exists on Dashboard) - reduce overall height/width
========================================================== */

body:has(.mining-scene-visual) .max-w-7xl,
body:has(.mining-scene-visual) .max-w-6xl {
    max-width: 1100px !important;
}

body:has(.mining-scene-visual) .p-6 {
    padding: 1rem !important;
}

body:has(.mining-scene-visual) .gap-6 {
    gap: 0.75rem !important;
}

body:has(.mining-scene-visual) .mb-8 {
    margin-bottom: 0.75rem !important;
}

body:has(.mining-scene-visual) .rounded-2xl {
    padding: 1rem !important;
}

@media (max-width: 768px) {
    body:has(.mining-scene-visual) .max-w-7xl,
    body:has(.mining-scene-visual) .max-w-6xl {
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}