/* SUNIVA WORLD map compact UI — 2026-08-01 */

.sworld-map-brand,
.sworld-map-portal-card {
    display: none !important;
}

.sworld-map-header {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1200 !important;
    pointer-events: none !important;
}

.sworld-map-balance {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 108px !important;
    min-height: 50px !important;
    padding: 8px 12px !important;
    border-radius: 22px !important;
    pointer-events: auto !important;
}

.sworld-scope-open {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    z-index: 1201 !important;
    width: 170px !important;
    min-height: 50px !important;
    padding: 7px 14px !important;
    border-radius: 22px !important;
    transform: none !important;
}

.sworld-scope-open > span:first-child {
    font-size: 20px !important;
}

.sworld-scope-open small {
    display: none !important;
}

.sworld-scope-open strong {
    font-size: 13px !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
}

.sworld-area-status {
    display: none !important;
}

.sworld-area-status.is-error {
    position: absolute !important;
    top: 76px !important;
    left: 16px !important;
    z-index: 1210 !important;
    display: block !important;
    width: min(250px, calc(100% - 32px)) !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 8px 22px rgba(8,28,40,.16) !important;
}

.sworld-area-status.is-error small,
.sworld-area-status.is-error strong {
    display: none !important;
}

.sworld-area-status.is-error span {
    font-size: 11px !important;
}

html body #sunivaMapUtilityRow {
    position: absolute !important;
    top: 76px !important;
    right: 16px !important;
    left: 16px !important;
    z-index: 1210 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 238px) 64px !important;
    align-items: start !important;
    justify-content: space-between !important;
    width: auto !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* 旧版の単独配置を確実に無効化する */
html body #sunivaWorldMapMode
> .suniva-portal-navigator,
html body #sunivaWorldMapMode
> #sunivaTreasureCompass {
    display: none !important;
}

html body #sunivaMapUtilityRow
#sunivaPortalNavigator.suniva-portal-navigator {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    align-items: center !important;
    gap: 4px !important;
    width: 238px !important;
    min-width: 238px !important;
    max-width: 238px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    margin: 0 !important;
    padding: 6px !important;
    transform: translate3d(0, 0, 0) !important;
    border: 1px solid #cba85d !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #193b4b, #0b2634) !important;
    box-shadow: 0 10px 24px rgba(6, 27, 39, .24) !important;
    opacity: 1 !important;
    backdrop-filter: blur(10px) !important;
    pointer-events: auto !important;
}

.suniva-portal-navigator__arrow {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(239, 211, 144, .44) !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #fff6dc !important;
    font-size: 20px !important;
}

.suniva-portal-navigator__summary {
    padding: 1px 3px !important;
    background: transparent !important;
    color: #fff !important;
}

.suniva-portal-navigator__summary span {
    margin: 0 !important;
    color: #e7c878 !important;
    font-size: 8px !important;
}

.suniva-portal-navigator__summary strong {
    color: #fff !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

html body #sunivaMapUtilityRow
#sunivaTreasureCompass {
    position: relative !important;
    inset: auto !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
}

html body #sunivaPortalNavigator[hidden] {
    display: none !important;
}

#sunivaCompassButton {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    padding: 5px !important;
    border: 2px solid #cba85d !important;
    background:
        radial-gradient(circle, #183847 0 49%, #0b202b 50% 62%, transparent 63%),
        repeating-conic-gradient(from -1deg, rgba(239,214,156,.95) 0 2deg, transparent 2deg 30deg),
        radial-gradient(circle, #223e49, #071821) !important;
    box-shadow: 0 7px 18px rgba(0, 18, 28, .28) !important;
}

#sunivaCompassArrow {
    top: 17px !important;
    left: 17px !important;
    width: 29px !important;
    height: 29px !important;
    font-size: 25px !important;
    line-height: 29px !important;
    transform-origin: 50% 50% !important;
    transition: transform .18s linear !important;
}

#sunivaCompassTarget,
#sunivaCompassGuide {
    display: none !important;
}

#sunivaCompassDistance {
    top: auto !important;
    bottom: 4px !important;
    font-size: 9px !important;
}

@media (max-width: 370px) {
    .sworld-scope-open {
        width: 148px !important;
    }

    .sworld-scope-open strong {
        font-size: 11px !important;
    }

    .sworld-map-balance {
        width: 96px !important;
    }

    html body #sunivaMapUtilityRow
    #sunivaPortalNavigator.suniva-portal-navigator {
        width: 214px !important;
        min-width: 214px !important;
        max-width: 214px !important;
    }

    html body #sunivaMapUtilityRow {
        grid-template-columns: minmax(0, 214px) 64px !important;
    }
}

/*
 * 2026-08-01 v10
 * 正式な二段目はマップDOM直下に置く。
 * 近くのポータルを左、コンパスを右に横並びで固定する。
 */
html body #sunivaWorldMapMode > #sunivaMapUtilityRow {
    position: absolute !important;
    top: 76px !important;
    right: 16px !important;
    bottom: auto !important;
    left: 16px !important;
    z-index: 1220 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 238px) 64px !important;
    gap: 10px !important;
    align-items: start !important;
    justify-content: space-between !important;
    width: auto !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

html body #sunivaWorldMapMode > #sunivaMapUtilityRow
> #sunivaPortalNavigator.suniva-portal-navigator {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 238px !important;
    min-width: 0 !important;
    max-width: 238px !important;
    height: 64px !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body #sunivaWorldMapMode > #sunivaMapUtilityRow
> #sunivaTreasureCompass {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* ARスコープ側に旧二段目を残さない */
html body #sunivaScopeStage #sunivaMapUtilityRow {
    display: none !important;
}

@media (max-width: 370px) {
    html body #sunivaWorldMapMode > #sunivaMapUtilityRow {
        right: 12px !important;
        left: 12px !important;
        grid-template-columns: minmax(0, 214px) 60px !important;
        gap: 8px !important;
    }

    html body #sunivaWorldMapMode > #sunivaMapUtilityRow
    > #sunivaPortalNavigator.suniva-portal-navigator {
        width: 214px !important;
        max-width: 214px !important;
    }
}

/* 2026-08-01: 二段目は「近くのポータル／コンパス」の順で横並び */
html body #sunivaWorldMapMode #sunivaMapUtilityRow {
    top: 172px !important;
    right: 16px !important;
    left: 16px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 64px !important;
    gap: 10px !important;
    height: 64px !important;
}

/* 中央に残る旧横長UIは非表示。二段目内の正式版だけ再表示する */
html body #sunivaWorldMapMode .suniva-portal-navigator {
    display: none !important;
}

html body #sunivaWorldMapMode #sunivaMapUtilityRow
> .suniva-portal-navigator {
    display: grid !important;
}

html body #sunivaWorldMapMode #sunivaMapUtilityRow
#sunivaPortalNavigator.suniva-portal-navigator {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 64px !important;
    margin: 0 !important;
}

html body #sunivaWorldMapMode #sunivaMapUtilityRow
#sunivaTreasureCompass {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
}

@media (max-width: 370px) {
    html body #sunivaWorldMapMode #sunivaMapUtilityRow {
        right: 12px !important;
        left: 12px !important;
        grid-template-columns: minmax(0, 1fr) 60px !important;
        gap: 8px !important;
    }
}

/*
 * 2026-08-01: 実DOMでは utility row は #sunivaWorldMapMode の外側、
 * #sunivaScopeStage 内にある。誤った親指定を上書きし、二段目へ固定する。
 */
html body #sunivaScopeStage #sunivaMapUtilityRow {
    position: absolute !important;
    top: 92px !important;
    right: 16px !important;
    bottom: auto !important;
    left: 16px !important;
    z-index: 10020 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 238px) 64px !important;
    gap: 10px !important;
    align-items: start !important;
    justify-content: space-between !important;
    width: auto !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

html body #sunivaScopeStage #sunivaMapUtilityRow
> #sunivaPortalNavigator.suniva-portal-navigator {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) 34px !important;
    width: 238px !important;
    min-width: 0 !important;
    max-width: 238px !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 6px !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body #sunivaScopeStage #sunivaMapUtilityRow
> #sunivaTreasureCompass {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
}

@media (max-width: 370px) {
    html body #sunivaScopeStage #sunivaMapUtilityRow {
        right: 12px !important;
        left: 12px !important;
        grid-template-columns: minmax(0, 214px) 60px !important;
        gap: 8px !important;
    }

    html body #sunivaScopeStage #sunivaMapUtilityRow
    > #sunivaPortalNavigator.suniva-portal-navigator {
        width: 214px !important;
        max-width: 214px !important;
    }
}

/* v10 final override: this block must remain last */
html body #sunivaWorldMapMode > #sunivaMapUtilityRow {
    position: absolute !important;
    top: 76px !important;
    right: 16px !important;
    bottom: auto !important;
    left: 16px !important;
    z-index: 1220 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 238px) 64px !important;
    gap: 10px !important;
    align-items: start !important;
    justify-content: space-between !important;
    width: auto !important;
    height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    pointer-events: none !important;
}

html body #sunivaWorldMapMode > #sunivaMapUtilityRow
> #sunivaPortalNavigator.suniva-portal-navigator {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    width: 238px !important;
    min-width: 0 !important;
    max-width: 238px !important;
    height: 64px !important;
    margin: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body #sunivaWorldMapMode > #sunivaMapUtilityRow
> #sunivaTreasureCompass {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
}

html body #sunivaScopeStage #sunivaMapUtilityRow {
    display: none !important;
}

@media (max-width: 370px) {
    html body #sunivaWorldMapMode > #sunivaMapUtilityRow {
        right: 12px !important;
        left: 12px !important;
        grid-template-columns: minmax(0, 214px) 60px !important;
        gap: 8px !important;
    }

    html body #sunivaWorldMapMode > #sunivaMapUtilityRow
    > #sunivaPortalNavigator.suniva-portal-navigator {
        width: 214px !important;
        max-width: 214px !important;
    }
}