/* Phones: one place for the small mobile fixes shared by every public page (Maximos, 2026-10-14).
   Loaded by layouts/full, layouts/app and layouts/guest. Gold buttons/tabs follow the mobile header (<=1100px); the rest is for narrow screens (<=768px). */
@media (max-width: 1100px) {
    /* the inner pages (news, downloads, history, rankings) use Bootstrap's blue: Gemini gold instead
       (whole mobile-header range: a 768px tablet showed a blue "Join" button) */
    .btn-primary {
        background: linear-gradient(135deg, #f1d17e, #b87b2a) !important;
        border-color: #b87b2a !important;
        color: #1a1205 !important;
        font-weight: 700;
    }
    .btn-primary:active { filter: brightness(.92); }
    .btn-outline-primary { color: #e8c27a !important; border-color: rgba(232, 194, 122, .55) !important; background: transparent !important; }
    .nav-tabs { border-color: rgba(232, 194, 122, .2) !important; }
    .nav-tabs .nav-link, .nav-pills .nav-link { color: #c9a96a !important; }
    .nav-tabs .nav-link.active, .nav-pills .nav-link.active {
        color: #1a1205 !important;
        background: linear-gradient(135deg, #f1d17e, #b87b2a) !important;
        border-color: transparent !important;
    }
    .page-link { color: #e8c27a !important; }
    .page-item.active .page-link { background: #b87b2a !important; border-color: #b87b2a !important; color: #1a1205 !important; }
    .text-primary { color: #e8c27a !important; }
}

@media (max-width: 768px) {
    /* tables: column titles wrap instead of being cut, rows stay readable */
    main .table { font-size: 13px; }
    main .table th { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
    main .table td, main .table th { padding: .55rem .5rem; }

    /* finger-sized links (they were 14–23px tall) */
    #footer .gf-col li a { display: inline-block; padding: 7px 0; }
    #footer .gf-legal a { display: inline-block; padding: 9px 4px; }
    #footer .gf-cta { padding-top: 9px; padding-bottom: 9px; }
    .btn-gray-no-border { display: inline-block; padding: 9px 4px !important; }
}

/* tables with 3+ columns: one card per row (mobile-polish.js adds the gx-stack class and the column titles) */
@media (max-width: 768px) {
    table.gx-stack thead { display: none; }
    table.gx-stack, table.gx-stack tbody, table.gx-stack tr, table.gx-stack td { display: block; width: 100% !important; }
    table.gx-stack { min-width: 0 !important; }
    table.gx-stack tr { margin: 0 0 10px; padding: 6px 12px; border: 1px solid rgba(232, 194, 122, .18) !important; border-radius: 10px; background: rgba(0, 0, 0, .28); }
    table.gx-stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0 !important; border: 0 !important; text-align: right; background: transparent !important; }
    table.gx-stack td + td { border-top: 1px solid rgba(255, 255, 255, .05) !important; }
    table.gx-stack td::before { content: attr(data-label); flex: 0 0 42%; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #c9a96a; }
    table.gx-stack td:not([data-label])::before { content: none; }
    .table-responsive:has(> table.gx-stack) { overflow: visible !important; }
}

/* inner pages (downloads, news, history, rankings) nest cards inside cards: ~60px lost on each side of a phone */
@media (max-width: 768px) {
    .legal-container { padding-left: 10px !important; padding-right: 10px !important; }
    .legal-container .card > .card-body { padding: 12px !important; }
    .legal-container .card .card > .card-body { padding: 10px !important; }
}

/* home page small print a player actually reads */
@media (max-width: 768px) {
    #features .gx-sinfo-item small { font-size: 10.5px !important; letter-spacing: .06em !important; }
    #downloads li a { display: inline-block; padding: 8px 0; line-height: 1.3; }
}

/* home "Explore systems" strip at 1024px and below: style.css keeps the desktop sidebar's "flex: 0 0 270px", which in the
   column layout became a 270px HEIGHT — tabs 54px tall inside 236–270px boxes, mostly empty, taps there did nothing */
@media (max-width: 1024px) {
    #features .features-sidebar { flex: 0 0 auto !important; height: auto !important; align-items: center; }
    #features .features-sidebar .feature-radio { align-self: center; }
}

/* 701-1199px (tablets, narrowed windows): #home stayed "flex row" (style.css only stacks it at <=700px), so the
   registration card was squeezed beside the hero to 0-190px wide and the hero spilled past the left edge. Stack it
   like a phone; the card then centres under the hero at its own min(470px, 100% - 32px). (Maximos, 2026-10-15) */
@media (min-width: 701px) and (max-width: 1199px) {
    #home { flex-direction: column; align-items: center; justify-content: flex-start; padding-inline: 16px; }
    #home .hero-content { width: 100%; max-width: 710px; min-height: 0; }
}

/* section intros ("02 / GET READY", "Enter the world", the one-line subtitle) sit straight on the artwork on phones and
   tablets: the grey 13.8px subtitle had no shadow and vanished over bright areas. Dark shadow + lighter grey. */
@media (max-width: 1100px) {
    .section-intro .section-index, .section-intro h2, .section-intro p { text-shadow: 0 1px 3px #000, 0 0 14px rgba(0, 0, 0, .85); }
    .section-intro p { color: #cfc8bb !important; }
}