/* ==========================================================================
   Dune Wars - In-game shell
   Top resource bar, status strip, grouped sidebar, mobile bottom tabs.
   Used by app/Views/ingame/layout/master.php
   Tokens mirror public/css/landing.css - keep the two in step.
   ========================================================================== */

:root {
    --sand-950: #0b0805;
    --sand-900: #120d08;
    --sand-850: #18110a;
    --sand-800: #1f160d;
    --sand-750: #251a0f;
    --sand-700: #2b1f12;
    --sand-600: #3d2c19;
    --sand-500: #57412a;
    --dune: #c8955a;
    --dune-light: #e6c08a;

    --spice: #e8862a;
    --spice-hot: #ffa646;
    --spice-edge: #8a420c;
    --blood: #b3261b;
    --blood-hot: #db3b2c;
    --blood-edge: #5a0f09;
    --ibad: #3fa9ff;
    --ibad-edge: #0f4d80;
    --oasis: #4cd964;

    --text: #f1e4cf;
    --muted: #b39f82;
    --faint: #7d6a52;
    --line: rgba(232, 134, 42, 0.35);
    --line-soft: rgba(200, 149, 90, 0.16);

    /* faction accent (overridden per body[data-faction]) */
    --accent: #e8862a;
    --accent-hot: #ffa646;
    --accent-edge: #8a420c;
    --accent-soft: rgba(232, 134, 42, 0.12);

    --cut: 12px;
    --font-display: 'Cinzel', 'Times New Roman', serif;
    --font-body: 'Rajdhani', 'Segoe UI', sans-serif;

    --gs-topbar-h: 64px;
    --gs-strip-h: 34px;
    --gs-sidebar-w: 250px;
    --gs-tabs-h: 62px;
}

body[data-faction="atreides"]  { --accent: #4f8fe0; --accent-hot: #79adf0; --accent-edge: #1d4a87; --accent-soft: rgba(79, 143, 224, 0.13); }
body[data-faction="ordos"]     { --accent: #3fa36b; --accent-hot: #5fc98b; --accent-edge: #1a5a35; --accent-soft: rgba(63, 163, 107, 0.13); }
body[data-faction="fremen"]    { --accent: #e0a43a; --accent-hot: #f3c063; --accent-edge: #7d5410; --accent-soft: rgba(224, 164, 58, 0.13); }
body[data-faction="harkonnen"] { --accent: #d1382b; --accent-hot: #ee5b4d; --accent-edge: #6a130c; --accent-soft: rgba(209, 56, 43, 0.14); }
body[data-faction="sardaukar"] { --accent: #a78bd6; --accent-hot: #c4adf0; --accent-edge: #4d3a78; --accent-soft: rgba(167, 139, 214, 0.13); }

body.gs-body {
    background: var(--sand-950);
    color: var(--text);
    font-family: var(--font-body);
}

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.gs-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: var(--gs-topbar-h);
    display: flex;
    align-items: stretch;
    background: linear-gradient(180deg, #17100a, #100b06);
    border-bottom: 1px solid var(--line);
}

.gs-brand {
    flex: 0 0 var(--gs-sidebar-w);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-right: 1px solid var(--line-soft);
}

.gs-brand a.gs-logo {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    letter-spacing: 0.26em;
    color: var(--dune-light);
    text-decoration: none;
    white-space: nowrap;
}

.gs-brand a.gs-logo span { color: var(--accent); }

.gs-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-soft);
    background: var(--sand-800);
    color: var(--dune-light);
    font-size: 1.1rem;
    cursor: pointer;
}

/* Resources */
.gs-resources {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none;
}

.gs-resources::-webkit-scrollbar { display: none; }

.gs-res {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border-right: 1px solid var(--line-soft);
    white-space: nowrap;
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s ease;
}

a.gs-res:hover { background: var(--accent-soft); color: var(--text); }

.gs-res i {
    width: 18px;
    text-align: center;
    color: var(--res-color, var(--dune));
    font-size: 0.95rem;
}

.gs-res__label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    line-height: 1.1;
}

.gs-res__value {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.gs-res--spice  { --res-color: var(--spice-hot); }
.gs-res--bank   { --res-color: var(--dune-light); }
.gs-res--turns  { --res-color: var(--blood-hot); }
.gs-res--covert { --res-color: #a78bd6; }
.gs-res--units  { --res-color: var(--oasis); }
.gs-res--rank   { --res-color: var(--ibad); }

.gs-res--timer { --res-color: var(--accent-hot); }
.gs-res--timer .gs-res__value { color: var(--accent-hot); min-width: 52px; }
.gs-res--timer.is-processing .gs-res__value { color: var(--oasis); }

/* Right-hand actions */
.gs-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px 0 10px;
    border-left: 1px solid var(--line-soft);
}

.gs-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dune-light);
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gs-icon-btn:hover,
.gs-icon-btn[aria-expanded="true"] {
    background: var(--sand-800);
    border-color: var(--line-soft);
    color: var(--text);
}

.gs-icon-btn .gs-count {
    position: absolute;
    top: 3px;
    right: 1px;
}

.gs-icon-btn--rewards.has-items i {
    color: var(--spice-hot);
    animation: gsWiggle 2.8s ease-in-out infinite;
}

@keyframes gsWiggle {
    0%, 86%, 100% { transform: rotate(0); }
    89% { transform: rotate(-12deg); }
    92% { transform: rotate(10deg); }
    95% { transform: rotate(-6deg); }
}

/* Store button: angled slab, spice coloured */
.gs-store {
    position: relative;
    display: inline-block;
    margin: 0 6px;
    text-decoration: none;
    filter: drop-shadow(0 4px 0 var(--spice-edge)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
    transition: transform 0.15s ease, filter 0.15s ease;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
}

.gs-store > span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1a0e03;
    background: linear-gradient(180deg, var(--spice-hot), var(--spice));
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.gs-store:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 0 var(--spice-edge)) drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55)) brightness(1.08);
}

.gs-store:active {
    transform: translateY(3px);
    filter: drop-shadow(0 1px 0 var(--spice-edge));
}

/* Avatar */
.gs-avatar-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.gs-avatar-btn:hover,
.gs-avatar-btn[aria-expanded="true"] {
    background: var(--sand-800);
    border-color: var(--line-soft);
}

/* 32px matches the half-size portrait sprite in dune-portraits.css (.avatar.dune-portrait) */
.gs-avatar-frame .avatar,
.gs-avatar-frame img {
    flex: 0 0 auto;
    display: block;
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    object-fit: cover;
    font-size: 0.9rem;
    transform: none !important;
    box-shadow: none !important;
}

.gs-avatar-frame > span:not(.gs-crown) {
    display: block;
    margin: 0 !important;
    line-height: 0;
}

.gs-avatar-frame {
    width: 36px;
    height: 36px;
    overflow: visible;
}

.gs-avatar-frame {
    position: relative;
    display: inline-flex;
    padding: 2px;
    background: var(--sand-600);
}

.gs-avatar-frame.is-premium { background: linear-gradient(135deg, var(--spice-hot), var(--spice-edge)); }
.gs-avatar-frame.is-supporter:not(.is-premium) { background: linear-gradient(135deg, #ee5b9b, #7a1e4a); }

.gs-avatar-frame .gs-crown {
    position: absolute;
    top: -9px;
    right: -7px;
    font-size: 0.72rem;
    color: var(--spice-hot);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.8));
}

.gs-avatar-name {
    font-weight: 700;
    font-size: 0.92rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Dropdown panels (rewards, bell, store, avatar)
   -------------------------------------------------------------------------- */
.gs-panel.dropdown-menu {
    min-width: 300px;
    padding: 0;
    margin-top: 8px !important;
    background: var(--sand-850);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
}

.gs-panel__head {
    padding: 12px 16px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    color: var(--dune-light);
    border-bottom: 1px solid var(--line-soft);
}

.gs-panel__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
    transition: background 0.12s ease;
}

.gs-panel__item:last-child { border-bottom: 0; }

.gs-panel__item:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.gs-panel__item i {
    flex: 0 0 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--sand-700);
    color: var(--spice-hot);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.gs-panel__item strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.2;
}

.gs-panel__item small {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
}

.gs-panel__item .gs-count { margin-left: auto; }

.gs-panel__empty {
    padding: 22px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   Status strip (news ticker + donation goal)
   -------------------------------------------------------------------------- */
.gs-strip {
    position: fixed;
    top: var(--gs-topbar-h);
    left: 0;
    right: 0;
    z-index: 1020;
    height: var(--gs-strip-h);
    display: flex;
    align-items: stretch;
    background: var(--sand-900);
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.88rem;
}

.gs-ticker {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    margin-left: var(--gs-sidebar-w);
    overflow: hidden;
}

.gs-ticker__label {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 0 14px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sand-950);
    background: var(--accent);
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    padding-right: 22px;
}

.gs-ticker__text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 16px;
    color: var(--dune-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gs-ticker__text.animate .news-item {
    display: inline-block;
    animation: gsTickerIn 0.5s ease;
}

@keyframes gsTickerIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gs-goal {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 16px;
    border-left: 1px solid var(--line-soft);
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
}

.gs-goal:hover { color: var(--text); background: var(--sand-850); }

.gs-goal i { color: #ee5b9b; }

.gs-goal__bar {
    width: 120px;
    height: 6px;
    background: var(--sand-700);
    overflow: hidden;
}

.gs-goal__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--spice-edge), var(--spice-hot));
}

.gs-goal__pct {
    font-weight: 700;
    color: var(--spice-hot);
    font-variant-numeric: tabular-nums;
}

.gs-goal-close {
    width: 26px;
    height: 26px;
    margin-right: 6px;
    border: 0;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    align-self: center;
}

.gs-goal-close:hover { color: var(--text); }

body.gs-goal-hidden .gs-goal,
body.gs-goal-hidden .gs-goal-close { display: none; }

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.gs-sidebar {
    position: fixed;
    top: calc(var(--gs-topbar-h) + var(--gs-strip-h));
    bottom: 0;
    left: 0;
    z-index: 1010;
    width: var(--gs-sidebar-w);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--sand-900), #0d0906);
    border-right: 1px solid var(--line-soft);
}

.gs-sidebar__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--sand-600) transparent;
}

.gs-group + .gs-group { margin-top: 4px; }

.gs-group__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px 6px;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--faint);
    cursor: pointer;
}

.gs-group__head:hover { color: var(--muted); }

.gs-group__head .gs-group__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    background: var(--blood-hot);
    transform: rotate(45deg);
    vertical-align: middle;
}

.gs-group__head i {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.gs-group.is-collapsed .gs-group__head i { transform: rotate(-90deg); }
.gs-group.is-collapsed .gs-group__items { display: none; }

/* Keep .navbar-nav / .nav-link class names: tutorial steps target them */
.gs-sidebar .navbar-nav {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gs-sidebar .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px 9px 18px;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--muted);
    border-left: 3px solid transparent;
    text-decoration: none;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.gs-sidebar .nav-link i.gs-nav-icon {
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--faint);
    transition: color 0.12s ease;
}

.gs-sidebar .nav-link:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.025);
}

.gs-sidebar .nav-link:hover i.gs-nav-icon { color: var(--dune-light); }

.gs-sidebar .nav-link.active {
    color: var(--text);
    background: linear-gradient(90deg, var(--accent-soft), transparent);
    border-left-color: var(--accent);
}

.gs-sidebar .nav-link.active i.gs-nav-icon { color: var(--accent-hot); }

.gs-sidebar .nav-link .gs-count { margin-left: auto; }

.gs-sidebar__foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--line-soft);
    font-size: 0.8rem;
    color: var(--faint);
}

.gs-online i {
    font-size: 0.5rem;
    color: var(--oasis);
    margin-right: 6px;
    vertical-align: middle;
    filter: drop-shadow(0 0 4px var(--oasis));
}

.gs-sidebar__foot a { color: var(--faint); }
.gs-sidebar__foot a:hover { color: var(--blood-hot); }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.gs-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.74rem;
    line-height: 1;
    color: #fff;
    background: var(--blood-hot);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.gs-count--spice { background: var(--spice); color: #1a0e03; }
.gs-count--ibad  { background: var(--ibad); color: #04121f; }
.gs-count--live  {
    background: var(--blood-hot);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    animation: gsPulse 1.6s ease-in-out infinite;
}

@keyframes gsPulse { 50% { opacity: 0.55; } }

/* Legacy glow badges still used in some views */
.attacker-glow,
.defender-glow,
.stolen-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-weight: 700;
    font-size: 0.74rem;
    color: #fff;
    background: var(--blood-hot);
    clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

.defender-glow { background: var(--ibad); color: #04121f; }
.stolen-glow   { background: var(--spice); color: #1a0e03; }

/* --------------------------------------------------------------------------
   Main content area
   -------------------------------------------------------------------------- */
.gs-main.page-wrapper {
    min-height: 100vh;
    margin-left: var(--gs-sidebar-w);
    padding-top: calc(var(--gs-topbar-h) + var(--gs-strip-h));
}

.gs-footer {
    padding: 22px 0 30px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--faint);
}

.gs-impersonation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 14px 20px 0;
    padding: 10px 16px;
    border-left: 3px solid var(--blood-hot);
    background: rgba(179, 38, 27, 0.18);
    color: #ffd9d2;
}

/* Turn-complete toast (shown instead of reloading while composing a message) */
.gs-toast {
    position: fixed;
    top: calc(var(--gs-topbar-h) + var(--gs-strip-h) + 14px);
    right: 18px;
    z-index: 1080;
    max-width: 360px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    background: var(--sand-800);
    border: 1px solid var(--line);
    border-left: 3px solid var(--spice);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55);
    color: var(--text);
}

.gs-toast i { color: var(--spice-hot); margin-top: 3px; }
.gs-toast a { color: var(--spice-hot); text-decoration: underline; }
.gs-toast button { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
.gs-tabs,
.gs-overlay {
    display: none;
}

/* Medium desktops: drop lower-priority stats so the bar never runs under the buttons */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .gs-res--rank { display: none; }
}

@media (min-width: 992px) and (max-width: 1259.98px) {
    .gs-res--units { display: none; }
    .gs-avatar-name { display: none; }
}

@media (min-width: 992px) and (max-width: 1139.98px) {
    .gs-res--covert { display: none; }
    .gs-res { padding: 0 12px; }
}

@media (max-width: 991.98px) {
    :root {
        --gs-topbar-h: 56px;
        --gs-strip-h: 30px;
    }

    .gs-brand {
        flex: 0 0 auto;
        padding: 0 10px;
        border-right: 0;
    }

    .gs-menu-btn { display: inline-grid; place-items: center; }

    .gs-brand { flex: 1 1 auto; }
    .gs-brand a.gs-logo { font-size: 1rem; letter-spacing: 0.18em; }

    /* Row 2: resources take the place of the news strip */
    .gs-strip { display: none; }

    .gs-resources {
        position: fixed;
        top: var(--gs-topbar-h);
        left: 0;
        right: 0;
        height: var(--gs-strip-h);
        justify-content: space-around;
        background: var(--sand-900);
        border-bottom: 1px solid var(--line-soft);
    }

    .gs-res {
        flex: 1 1 0;
        justify-content: center;
        gap: 7px;
        padding: 0 4px;
        border-right: 1px solid var(--line-soft);
    }

    .gs-res:last-child { border-right: 0; }
    .gs-res > div { display: flex; align-items: baseline; }
    .gs-res__label { display: none; }
    .gs-res__value { font-size: 0.92rem; }
    .gs-res--timer .gs-res__value { min-width: 0; }

    .gs-res--covert,
    .gs-res--units,
    .gs-res--rank { display: none; }

    .gs-actions { padding: 0 6px; gap: 0; border-left: 0; }
    .gs-icon-btn { width: 38px; height: 38px; }
    .gs-store { margin: 0 4px; }
    .gs-store > span { padding: 7px 10px; }
    .gs-store .gs-store__label { display: none; }
    .gs-avatar-btn { padding: 2px; }
    .gs-avatar-name { display: none; }

    .gs-sidebar {
        z-index: 1045;
        top: 0;
        width: min(300px, 86vw);
        transform: translateX(-102%);
        transition: transform 0.25s ease;
        box-shadow: 18px 0 40px rgba(0, 0, 0, 0.6);
    }

    body.gs-nav-open .gs-sidebar { transform: translateX(0); }

    .gs-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    body.gs-nav-open .gs-overlay { opacity: 1; pointer-events: auto; }
    body.gs-nav-open { overflow: hidden; }

    .gs-sidebar__mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 18px;
        border-bottom: 1px solid var(--line-soft);
    }

    .gs-main.page-wrapper {
        margin-left: 0;
        padding-bottom: calc(var(--gs-tabs-h) + env(safe-area-inset-bottom));
    }

    .gs-tabs {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: calc(var(--gs-tabs-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: linear-gradient(180deg, #17100a, #0d0906);
        border-top: 1px solid var(--line);
    }

    .gs-tab {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 0;
        background: none;
        color: var(--muted);
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 0.7rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
    }

    .gs-tab i { font-size: 1.15rem; }

    .gs-tab.active {
        color: var(--accent-hot);
        background: linear-gradient(0deg, var(--accent-soft), transparent);
    }

    .gs-tab.active::before {
        content: "";
        position: absolute;
        top: -1px;
        left: 22%;
        right: 22%;
        height: 3px;
        background: var(--accent);
    }

    .gs-tab .gs-count {
        position: absolute;
        top: 6px;
        left: calc(50% + 6px);
    }

    .gs-toast {
        left: 12px;
        right: 12px;
        max-width: none;
    }
}

@media (min-width: 992px) {
    .gs-sidebar__mobile-head,
    .gs-goal--drawer { display: none !important; }
}

.gs-goal--drawer {
    padding: 12px 18px;
    border-left: 0;
    border-bottom: 1px solid var(--line-soft);
}

.gs-goal--drawer .gs-goal__bar { flex: 1 1 auto; width: auto; }

@media (max-width: 380px) {
    .gs-brand a.gs-logo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gs-icon-btn--rewards.has-items i,
    .gs-count--live { animation: none; }
}

/* --------------------------------------------------------------------------
   Alliance header + tab bar (app/Views/alliance/_nav.php), shown on every alliance page
   -------------------------------------------------------------------------- */
.al-nav-wrap { padding-top: 18px; }

.al-nav {
    position: relative;
    margin-bottom: 18px;
    border: 1px solid var(--line-soft);
    background: linear-gradient(160deg, #1c140c, #120d08);
}

.al-nav::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 60px;
    height: 2px;
    background: var(--accent);
}

.al-nav--tabs-only { margin: 14px 0 0; }

.al-nav__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
}

.al-nav__logo {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--sand-700);
    border: 1px solid var(--line);
    text-decoration: none;
}

.al-nav__logo img { width: 100%; height: 100%; object-fit: cover; }
.al-nav__logo span { font-family: var(--font-display); font-weight: 900; font-size: 0.82rem; color: var(--accent-hot); }

.al-nav__title a {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text) !important;
    text-decoration: none;
}

.al-nav__title a .al-tag { color: var(--accent-hot); }
.al-nav__title > span { font-size: 0.84rem; color: var(--muted); }
.al-nav__dot { font-size: 0.5rem; color: var(--oasis); margin: 0 4px 0 2px; vertical-align: middle; }

.al-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.al-tabs::-webkit-scrollbar { display: none; }

.al-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--muted) !important;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.12s ease, background 0.12s ease;
}

.al-tab i { color: var(--faint); }
.al-tab:hover { color: var(--text) !important; background: rgba(255, 255, 255, 0.02); }

.al-tab.is-active {
    color: var(--text) !important;
    background: var(--accent-soft);
    border-bottom-color: var(--accent);
}

.al-tab.is-active i { color: var(--accent-hot); }

@media (max-width: 767.98px) {
    .al-tab { padding: 10px 12px; font-size: 0.84rem; }
}

/* --------------------------------------------------------------------------
   Kept from the old layout (used by views / tutorials)
   -------------------------------------------------------------------------- */
.portrait-frame {
    transform: translateZ(0);
    backface-visibility: hidden;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

[data-bs-theme="dark"] .hide-theme-dark { display: none !important; }

/* --------------------------------------------------------------------------
   Tutorial tour (Driver.js popovers, public/js/tutorial-tour.js)
   -------------------------------------------------------------------------- */
.driver-popover.dw-tour {
    min-width: 300px;
    max-width: 400px !important;
    padding: 0 !important;
    color: var(--text) !important;
    font-family: var(--font-body) !important;
    background: linear-gradient(160deg, #1f160d, #120d08) !important;
    border: 1px solid var(--line) !important;
    border-top: 3px solid var(--accent) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.4) !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

/* driver.css sets ".driver-popover * { font-family: Helvetica... }", which would also replace the icon font */
.driver-popover.dw-tour * { font-family: inherit; }
.driver-popover.dw-tour .fa-solid,
.driver-popover.dw-tour .fa-regular { font-family: "Font Awesome 6 Free" !important; }
.driver-popover.dw-tour .fa-brands { font-family: "Font Awesome 6 Brands" !important; }

.dw-tour__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 10px;
    padding: 12px 44px 0 16px;
}

.dw-tour__eyebrow {
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--accent-hot);
}

.dw-tour__eyebrow i { margin-right: 6px; }
.dw-tour__count { font-family: var(--font-display); font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.dw-tour__bar { grid-column: 1 / -1; height: 3px; background: var(--sand-700); }
.dw-tour__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--spice-hot)); transition: width 0.4s ease; }

.dw-tour .driver-popover-title {
    margin: 0 !important;
    padding: 12px 16px 0 !important;
    font-family: var(--font-display) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    line-height: 1.25 !important;
    color: var(--dune-light) !important;
}

.dw-tour .driver-popover-description {
    margin: 0 !important;
    padding: 8px 16px 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: rgba(241, 228, 207, 0.86) !important;
}

.dw-tour__reward {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px 0;
    padding: 7px 10px;
    font-size: 0.84rem;
    color: var(--muted);
    background: rgba(255, 166, 70, 0.08);
    border-left: 3px solid var(--spice-hot);
}

.dw-tour__reward i { color: var(--spice-hot); }
.dw-tour__reward strong { color: var(--spice-hot); }

.dw-tour .driver-popover-footer {
    margin: 14px 0 0 !important;
    padding: 10px 16px 12px !important;
    border-top: 1px solid var(--line-soft);
    background: rgba(0, 0, 0, 0.18);
}

.dw-tour .driver-popover-navigation-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

.dw-tour .driver-popover-footer button,
.dw-tour__goto {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
    padding: 7px 14px !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, color 0.15s;
}

.dw-tour .driver-popover-next-btn,
.dw-tour__goto {
    color: #0b0805 !important;
    background: var(--accent) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}

.dw-tour .driver-popover-next-btn:hover,
.dw-tour__goto:hover { background: var(--accent-hot) !important; transform: translateY(-1px); }

.dw-tour .driver-popover-prev-btn {
    color: var(--dune-light) !important;
    background: var(--sand-700) !important;
    border: 1px solid var(--line-soft) !important;
}

.dw-tour .driver-popover-prev-btn:disabled { opacity: 0.35; cursor: default; }

.dw-tour .driver-popover-close-btn {
    top: 6px !important;
    right: 6px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 20px !important;
    color: var(--muted) !important;
}

.dw-tour .driver-popover-close-btn:hover { color: var(--accent-hot) !important; }

.dw-tour .driver-popover-arrow { border-width: 8px !important; }
.dw-tour .driver-popover-arrow-side-top    { border-top-color: var(--line) !important; }
.dw-tour .driver-popover-arrow-side-bottom { border-bottom-color: var(--accent) !important; }
.dw-tour .driver-popover-arrow-side-left   { border-left-color: var(--line) !important; }
.dw-tour .driver-popover-arrow-side-right  { border-right-color: var(--line) !important; }

/* The highlighted element: a sharp frame on the edge of the cut-out with a slow glow */
.driver-active .driver-active-element {
    outline: 2px solid var(--accent) !important;
    outline-offset: 6px;
    animation: dw-tour-glow 1.8s ease-in-out infinite;
}

@keyframes dw-tour-glow {
    0%, 100% { box-shadow: 0 0 0 6px transparent, 0 0 18px 6px color-mix(in srgb, var(--accent) 20%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent, 0 0 30px 12px color-mix(in srgb, var(--accent) 42%, transparent); }
}

@media (max-width: 575.98px) {
    .driver-popover.dw-tour { min-width: 0; max-width: calc(100vw - 24px) !important; }
    .dw-tour .driver-popover-description { font-size: 0.9rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    .driver-active .driver-active-element { animation: none; }
}

/* --------------------------------------------------------------------------
   Toasts (window.dwToast, created by public/js/tutorial-tour.js)
   -------------------------------------------------------------------------- */
.dw-toasts {
    position: fixed;
    top: 76px;
    right: 16px;
    z-index: 1000000001; /* above the tour overlay and popover */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 24px));
    pointer-events: none;
}

.dw-toast {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 12px 12px 14px 14px;
    overflow: hidden;
    color: var(--text);
    background: linear-gradient(160deg, #21170d, #120d08);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.dw-toast.is-in { opacity: 1; transform: none; }
.dw-toast.is-leaving { opacity: 0; transform: translateX(24px); }

.dw-toast__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    color: var(--accent-hot);
    background: var(--sand-700);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.dw-toast__body { min-width: 0; }
.dw-toast__body strong { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.03em; color: var(--dune-light); }
.dw-toast__body p { margin: 3px 0 0; font-size: 0.86rem; color: var(--muted); }
.dw-toast__body a { color: var(--accent-hot); }

.dw-toast__loot { display: flex; flex-direction: column; gap: 3px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.86rem; color: var(--muted); }
.dw-toast__loot li { display: flex; align-items: center; gap: 8px; }
.dw-toast__loot i { width: 16px; text-align: center; color: var(--spice-hot); }
.dw-toast__loot span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--oasis); }

.dw-toast__action { margin-top: 10px; }

.dw-toast__close {
    padding: 2px 4px;
    font-size: 0.95rem;
    color: var(--faint);
    background: none;
    border: 0;
    cursor: pointer;
}

.dw-toast__close:hover { color: var(--dune-light); }

.dw-toast__timer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--accent);
    transform-origin: left;
    animation: dw-toast-timer linear forwards;
}

@keyframes dw-toast-timer { to { transform: scaleX(0); } }

.dw-toast--reward { border-left-color: var(--spice-hot); }
.dw-toast--reward .dw-toast__icon { color: #0b0805; background: var(--spice-hot); }
.dw-toast--reward .dw-toast__timer { background: var(--spice-hot); }

.dw-toast--complete {
    border-left-color: #ffd36b;
    background: linear-gradient(160deg, #2a1d0c, #120d08);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 200, 80, 0.18);
}

.dw-toast--complete .dw-toast__icon { color: #0b0805; background: linear-gradient(135deg, #ffe08a, #d99a2b); }
.dw-toast--complete .dw-toast__body strong { font-size: 1.15rem; color: #ffd36b; }

@media (max-width: 767.98px) {
    .dw-toasts { top: auto; bottom: 76px; right: 12px; left: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .dw-toast { transition: none; }
}



/* --------------------------------------------------------------------------
   Shared confirm popup (#gsConfirm, used by data-confirm on forms/links)
   -------------------------------------------------------------------------- */
.gs-confirm .modal-body { padding: 26px 22px 18px; text-align: center; }
.gs-confirm__icon { font-size: 2rem; color: var(--accent-hot); }
.gs-confirm .modal-title { margin: 10px 0 6px; font-size: 1.15rem; }
.gs-confirm__text { margin: 0; color: var(--muted); white-space: pre-line; }
.gs-confirm .modal-footer { justify-content: center; gap: 8px; }
.gs-confirm .modal-footer .btn { min-width: 110px; }
#gsConfirm.is-danger .modal-status { background: var(--blood-hot); }
#gsConfirm.is-danger .gs-confirm__icon { color: var(--blood-hot); }

/* --------------------------------------------------------------------------
   Medals: "Spice gem" (app/Helpers/medal_helper.php medal_gem())
   Faceted diamond in the tier metal, category icon in the middle; top 3 glow.
   -------------------------------------------------------------------------- */
.mg {
    --m1: #d9c4a0; --m2: #7d6a52; --m3: #3d3020; --glow: transparent;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--mg-size, 40px);
    height: var(--mg-size, 40px);
    vertical-align: middle;
    filter: drop-shadow(0 0 5px var(--glow));
    transition: transform 0.15s ease;
}

.mg::before,
.mg::after {
    content: "";
    position: absolute;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.mg::before { inset: 0; background: conic-gradient(from 45deg, var(--m1), var(--m2), var(--m3), var(--m2), var(--m1)); }
.mg::after { inset: 15%; background: radial-gradient(circle at 50% 40%, #2a1e12, #0f0a06); }
.mg i { position: relative; z-index: 1; font-size: calc(var(--mg-size, 40px) * 0.3); color: var(--m1); }
.mg:hover { transform: scale(1.12); }

.mg--sm { --mg-size: 28px; }
.mg--sm i { font-size: 11px; }
.mg--md { --mg-size: 40px; }
.mg--lg { --mg-size: 56px; }

.mg--t1 { --m1: #ffe08a; --m2: #c98a12; --m3: #7a4d05; --glow: rgba(255, 200, 80, 0.45); }
.mg--t2 { --m1: #f2f2f2; --m2: #9aa3ad; --m3: #4c535b; --glow: rgba(200, 210, 220, 0.35); }
.mg--t3 { --m1: #f0b07a; --m2: #a5582a; --m3: #5a2c10; --glow: rgba(220, 130, 70, 0.35); }
.mg--t4 { --m1: #d9c4a0; --m2: #7d6a52; --m3: #3d3020; --glow: transparent; }